YAHOO!军规

来源：互联网发布：apache jmeter 2.13 编辑：程序博客网时间：2024/04/29 03:21

前端优化

一.尽可能减少HTTP请求数

http请求的定义：

从客户端到服务器端的请求消息。包括消息首航中，对资源的请求方法，资源的标识符及使用的协议。

http请求的菜鸟概论：

当你在网页中看到的文字，图片都是你从服务器获取的，每一个内容的获取，都是一个http的请求;每一个内容(如文字、图片、js、css)的获取，就是一个http请求；

优化请求：

文字，图片合并，js合并，css合并；

二、使用CDN（内容分发网络）

CDN的定义：

尽可能避开互联网上有可能影像数据传输和稳定性的瓶颈和环节，使内容传输的更快，更稳定。

CDN的菜鸟概论：

在离你最近的地方，放置一台性能好链接顺畅的副本服务器，让你能够以最近的距离，最快的速度获取内容。

使用CDN（内容分发网络）前后对比

1.在没有使用CDN时，需要经过较多的节点才能访问到目的地。

2.使用了CDN时，CDN服务器复制多个副本在你附近，这时候你访问时经过CDN服务器找到最佳节点访问目的地，当然这要购买CDN服务器，用金钱买性能

三、添加Expire/Cache-Control头

expire头的内容是一个时间值，值就是资源在本地的过期时间、存在本地。在本地缓存阶段，找到一个对应的资源值，当前时间还没超过资源的过期时间，就直接使用这一个资源，不会发送 HTTP请求。

cache-control：是http协议中常用的头部之一，顾名思义，他是负责控制页面的缓存机制，如果该头部指示缓存，缓存的内容也会存在本地，操作流程和expire相似，但也有不同的地方，cache-control有更多的选项，而且也有更多的处理方式。

四、启用Gzip压缩

GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNIX系统的文件压缩。后缀为.gz的文件，它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能，一般对纯文本内容可压缩到原大小的40％.这样传输就快了

将资源在服务端口先进行压缩处理减小体积，然后在浏览器上在解压缩解释执行！

把文件先压缩，再传输

优点：提升文件传输速度；（在服务器端配置）

五、将CSS放在页面最上面

css（层叠样式表）：

后面的样式会覆盖前面的，级别高的样式会覆盖级别低的样式。

解决：先加载css，放在头部<head>提高渲染性能，避免页面空白或者重绘。

IE：css放body底部，IE禁止了网页内容的顺序显示，低网速情况下导致空白

FF：不阻止显示，但会导致闪烁重绘

六、将Script放在页面最下面

可以让页面内容优先呈现出来，而非先暴露script的bug

将Script放在页面的最下面，因为浏览器加载和解释网页的顺序是从左到右从上到下的，如果JavaScript代码有死循环的问题，网页可能是空白一片的，如果放在页面的最下面即使如此，页面也能展现出来，当然这个问题最好避免！

七、避免在CSS中使用Expressions

(所谓css expression就是css的属性值是由js计算出来的,用了该属性,鼠标移动,滚动都会对其值进行重新计算),这样会严重影响浏览器效率

八、将JavaScript和CSS都放在外部文件中

JS,CSS都放在外部的文件中，单独提取的好处

1：提高了JS和CSS的复用性；

2：减少了页面的体积；

3：提高了JS和CSS的可维护性

缺点：增加请求数，可通过缓存优化

放在内部的优点

1：减少了页面的请求数；

2：提升了页面的渲染速度

css和js写在页面的情况：

1.只应用于一个页面

2.不经常被访问

3.脚本和样式很少（少于20行）

九、减少DNS查询

底层行为

定义：访问网址，打开之前，转换机制（ip地址），对应网址；

时间：20ms最少；

如果同时很多查找过程，会影响速度；因此需要浏览器的缓存；

IE30m，ff60s，chrome60s，

缓存长：减少dns重复查找，节省时间；

缓存短：及时检测服务器的变化，保证正确性；

多域和单域：

多域：

不同资源放在不同的ip

单域：

所有资源放在一个IP

十、压缩JavaScript和Css

1、去除不必要的空白符、格式符、注释符。

2、简写方法名、参数名，压缩JS脚本。

十一、避免重定向

定义：原始请求被重新转到了其他请求

301：被移动到另外位置（永久重定向）使搜索引擎智能,不需要从旧地址到新地址，删除旧地址，直接到新地址

302：页面被找到，但不在原始位置（临时重定向）先到旧地址，再到新地址

重定向：重新请求下载资源，增加了http请求

十二、移除重复的脚本

移除重复的脚本可以减少文件的大小，另外，就是可以避免出现未知的问题！

十三、配置实体标签（ETags）

使用一种标志表示一种资源是否做了修改，可以减少服务器的响应。

详细点就是：浏览器想服务器要某种资源，服务器一看，判断出了这种资源已经给过浏览器了，并且在服务器端的也没有变化，所以浏览器可以使用他自身就有的，然后告诉浏览器，浏览器回到自身找找，找到啦就用了，这样浏览器和服务器之间会有对话不过不用服务器再重复的给浏览器资源了！

配置实体标签Etag帮助服务器减轻负担

十四、使用AJAX缓存

post:每次都执行，不被缓存

get:同一地址不重复执行，可以被缓存

十五、Yslow网站性能优化工具

YSlow（基于浏览器执行），在firefork下执行的最好

对网站进行分析，给出优化报告

1. 安装fireBug 2. YSlow

Grade:等级视图网页评分（A->F等级依次降低）

Components:组件视图，检视各个元素占用空间大小

Statistics:统计信息视图，与Components相似

Tools:

JSLint:检验JavaScript正确性

AllJS:展示网页中使用的JS

ALLJS Beautified:将JS以可读的方式展示

ALLJS Minified:删除换行、空格等，压缩JS

ALLCSS:展示网页中使用的CSS

YUICSS Compressor:压缩CSS

ALLSmush.it:优化图片

PrintableView:将分析打印成报告

0 0