Yahoo给出的34条网站加速方法(2)
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就不支持。