Yahoo团队经验：网站性能优化的34条黄金法则

Posted 2020-11-11 pei~乐悠悠

英文原文：http://developer.yahoo.com/performance/rules.html

1、尽量减少HTTP请求次数

（1）合并文件就是通过把所有的脚本放到一个文件中来减少HTTP 请求的方法，如可以简单地把所有的CSS 文件都放到一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。CSS Sprites 是减少图像请求的有效方法，把所有的背景图像都放到一个图片文件中，然后通过CSS 的background-image和background-position属性来显示不同的部分。图片地图是把多张图片整合到一张图片中，虽然文件的总体大小不会改变，但是可以减少HTTP请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候才能使用，如导航栏。

2、减少DNS 查找次数

3、避免跳转

4、可缓存的AJAX

5、推迟加载时间

6、预加载，

7、减少DOM元素数量

8、根据域名划分页面内容

9、使iframe的数量最小

10、不要出现404错误

11、使用内容分发网络

12、为文件头指定Expires或Cache-Control

13、Gzip压缩文件内容

14、配置ETag

15、尽早刷新输出缓冲

16、使用GET 来完成AJAX请求

17、把样式表置于顶部

18、避免使用CSS表达式

19、使用外部javascript和CSS

20、削减JavaScript和CSS

21、用<link>代替@import

22、避免使用滤镜

23、把脚本置于页面底部

24、剔除重复脚本

25、减少DOM 访问

26、开发智能事件处理程序

27、减小Cookie体积

28、对于页面内容使用无cookie域名

29、优化图像

30、优化CSS Sprite

31、不要在html中缩放图像

32、favicon.ico要小而且可缓存

favicon.ico是位于服务器根目录下的一个图片文件。它是必定存在的，因为即使你不关心它是否有用，浏览器也会对它发出请求，因此最好不要返回一 个404 Not Found的响应。由于是在同一台服务器上，它每被请求一次coockie就会被发送一次。这个图片文件还会影响下载顺序，例如在IE中当你在 onload中请求额外的文件时，favicon会在这些额外内容被加载前下载。因此，为了减少favicon.ico带来的弊端，要做到：
文件尽量地小，最好小于1K
在适当的时候（也就是你不要打算再换 favicon.ico的时候，因为更换新文件时不能对它进行重命名）为它设置Expires文件头。你可以很安全地把Expires文件头设置为未来的几个月。你可以通过核对当前favicon.ico的上次编辑时间来作出判断。

Imagemagick可以帮你创建小巧的 favicon

33、保持单个内容小于25k

这条限制主要是因为iPhone不能缓存大于25k的文件。注意这里指的是压缩后的大小。由于单纯gizp压缩可能达不要求，因此精简文件就显得十分重要。

34、打包组件成复合文本

把页面内容打包成复合文本就如同带有多附件的Email，它能够使你在一个HTTP请求中取得多个组件（切记：HTTP请求是很奢侈的）。当你使用这条规则时，首先要确定用户代理是否支持（iPhone就不支持）。