高性能网站建设指南--前端

性能黄金法则：只有10%-20%的最终用户响应时间花在了下载HTML文档上，其余的80%-90%时间花在了下载页面中的所有组件上。

规则1、减少HTTP请求
1、图片地图
2、合并脚本和样式表

规则2、使用内容发布网络

规则3、添加Expires头
1、Expires头
2、Max-Age和mod_expires

规则4、压缩组件；AddOutputFilterByType DEFAULT text/html text/css application/x-javascript

规则5、将样式表放在顶部

规则6、将脚本放在底部

规则7、避免CSS表达式

规则8、使用外部Javascript和CSS

规则9、减少DNS查找

规则10、精简Javascript

规则11、避免重定向

规则12、移除重复脚本

规则13、配置ETag

规则14、使Ajax可缓存

新增：
规则15. Flush the Buffer Early 尽早的释放缓冲
当用户进行页面请求时，服务器端需要花费200到500毫秒时间来拼合HTML，将写在head与body之间，释放缓冲，这样可以将文件头先发送出去，然后再发送文件内容，提高效率。

规则16. Use GET for AJAX Requests 用GET方式进行AJAX请求
Get 方法和服务器只有一次交互（发送数据），而 Post 要两次（发送头部再发送数据）。

规则17. Post-load Components 延迟加载组件
最先加载必须的组件进行页面初始化，然后再加载其他，YUI Image Loader 是很好的例子。

规则18. Preload components 预加载组件
提前加载以后可能用到的东西，和延迟加载并不冲突，它的目的是为后续请求提供更快的响应，参见Google首页上的CSS sprites应用。

规则19. Reduce the Number of DOM Elements 减少DOM元素数量
复杂的页面结构意味着更长的下载及响应时间，更合理更高效的使用标签来架构页面，是好的前端的必备条件。

规则20. Split Components Across Domains 跨域分离组件
页面组件多个来源可以增大你的平行下载量，但注意不要过多，超过2-4个域名会引起上面说到的DNS查找浪费。

规则21. Minimize the Number of iframes 减少iframe数量
需要更有效的利用 ifames。
iframe 优点：有利于下载缓慢的广告等第三方内容，安全沙箱，并行下载脚本
iframe 缺点：即使为空也会有较大资源消耗，会阻止页面的onload，非语义

规则22. No 404s 不要出现404页面
站点本身里（非搜索结果）出现404页面，无意义的404页面会影响用户体验并且会消耗服务器资源。

规则23. Reduce Cookie Size 减小Cookie
Cookie在服务器及浏览器之间的通过文件头进行交换，尽可能减小Cookie体积，设置合理的过期时间，能够很好的提高效率。

规则24. Use Cookie-free Domains for Components 对组件使用无Cookie的域名
对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放你的静态组件式一个好方法，或者也可以在Cookie中只存放带www的域名。

规则25. Minimize DOM Access 减少DOM的访问次数
JS访问DOM是很慢的，尽量不要用JS来设置页面布局。

规则26. Develop Smart Event Handlers 开发灵活的事件处理句柄
DOM树上过多的元素被加入事件句柄的话，反应效率肯定会低，YUI事件工具有一个 onAvailable 方法可以帮助你灵活的设置DOM事件句柄

规则27. Choose < link >over @import 使用< link >而非 @import
在IE中使用@import就和在页面底部用< link >一样，我们前面说要把< link >放顶部的。

规则28. Avoid Filters 避免过滤器的使用
如果需要Alpha透明，不要使用AlphaImageLoader，它效率低下而且只对IE6及以下的版本适用，用PNG8图片。如果你非要使用，加上_filter以免影响IE7+用户。

规则29. Optimize Images 优化图片
将你的GIF转为PNG8会是个减小体积的好办法，另外有很多方法处理你的JPG及PNG图片以达到优化效果。

规则30. Optimize CSS Sprites 优化CSS Sprites
在CSS Sprites中竖直并尽量紧凑的排列图片，尽量将颜色相似的图片排在一起，会减小图片本身的大小及提高页面图片显示速度。

规则31. Don’t Scale Images in HTML 不要在HTML中缩放图片
图片要用多大的就用多大的，1000X1000的图片被width=”100″ height=”100″以后，本身的KB数是不会减少的。

规则32. Make favicon. ico Small and Cacheable 缩小favicon. ico的大小并缓存它
站点的浏览器ICO应该不是经常换吧，那就长时间的缓存它，并且最好控制在1K以下。

规则33. Keep Components under 25K 保证组件在25K以下
iPhone不能缓存25K以上的组件，并且这还是要在被压缩前。

规则34. Pack Components into a Multipart Document 将组件打包进一个多部分的文档中
就好像在邮件中加入附件一样，一个HTTP请求就够了，但是这一技术需要确保你的代理支持，iPhone就不支持。