再谈Yahoo关于性能优化的N条军规

lite6

本来这是个老生常谈的问题，上周自成又分享了一些性能优化的建议，我这里再做一个全面的Tips整理，谨作为查阅型的文档，不妥之处，还请指正。  
一、 Yahoo的军规条例：  
谨记：80%-90%的终端响应时间是花费在下载页面中的图片，样式表，脚本，flash等；  
详细的解释来这里查：
http://developer.yahoo.com/performance/rules.html
  
也可以直接firebug上一项项比对，如下图：  


  
简单翻译解释下：  
1、尽量减少HTTP请求个数——须权衡  
合并图片（如css sprites，内置图片使用数据）、合并CSS、JS，这一点很重要，但是要考虑合并后的文件体积。  
2、使用CDN（内容分发网络）  
这里可以关注CDN的三类实现：镜像、高速缓存、专线，以及智能路由器和负载均衡；  
3、为文件头指定Expires或Cache-Control，使内容具有缓存性。  
区分静态内容和动态内容，避免以后页面访问中不必要的HTTP请求。  
4、避免空的src和href  
留意具有这两个属性的标签如link，script，img，iframe等；  
5、使用gzip压缩内容  
Gzip压缩所有可能的文件类型以来减少文件体积  
6、把CSS放到顶部  
实现页面有秩序地加载，这对于拥有较多内容的页面和网速较慢的用户来说更为重要，同时，HTML规范清楚指出样式表要放包含在页面的区域内；  
7、把JS放到底部  
HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个，而问题在于脚本阻止了页面的平行下载，即便是主机名不相同  
8、避免使用CSS表达式  
页面显示和缩放，滚动、乃至移动鼠标时，CSS表达式的计算频率是我们要关注的。可以考虑一次性的表达式或者使用事件句柄来代替CSS表达式。  
9、将CSS和JS放到外部文件中  
我们需要权衡内置代码带来的HTTP请求减少与通过使用外部文件进行缓存带来的好处的折中点。  
10、减少DNS查找次数  
我们需要权衡减少 DNS查找次数和保持较高程度并行下载两者之间的关系。  
11、精简CSS和JS  
目的就是减少下载的文件体积，可考虑压缩工具JSMin和YUI Compressor。  
12、避免跳转  
为了确保“后退”按钮可以正确地使用，使用标准的 3XXHTTP状态代码；同域中注意避免反斜杠 “/” 的跳转；  
跨域使用 Alias或者 mod_rewirte建立 CNAME（保存一个域名和另外一个域名之间关系的DNS记录）  
13、剔除重复的JS和CSS  
重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。  
14、配置ETags  
Entity tags（ETags）（实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制（“实体”就是所说的“内 容”，包括图片、脚本、样式表等），是比last-modified date更更加灵活的机制，单位时间内文件被修过多次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载。  
15、使AJAX可缓存  
利用时间戳，更精巧的实现响应可缓存与服务器数据同步更新。  
16、尽早刷新输出缓冲  
尤其对于css，js文件的并行下载更有意义  
17、使用GET来完成AJAX请求  
当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。在url小于2K时使用GET获取数据时更加有意义。  
18、延迟加载  
确定页面运行正常后，再加载脚本来实现如拖放和动画，或者是隐藏部分的内容以及折叠内容等。  
19、预加载  
关注下无条件加载，有条件加载和有预期的加载。