不可不知的 WEB 前端网站优化—— 雅虎 34 条军规

不可不知的 WEB 前端网站优化—— 雅虎 34 条军规

不得不说如今依然适用于大部分的网站

当年雅虎推荐了一套优化网站加载速度的34条法则（包括Yslow规则22条），如下是详细说明。

1. Minimize HTTP Requests 减小 HTTP 请求

图片、css、script、flash 等等这些都会增长 http 请求数，减小这些元素的数量就能减小响应时间。把多个JS、CSS在可能的状况下写进一个文件，页面里直接写入图片也是很差的作法，应该写进CSS里，利用 CSS sprites 将小图拼合后利用background来定位。

2. Use a Content Delivery Network 利用CDN技术

CDN 确实是好东西，8过服务器提供商的这项服务通常是要收费的，我之前买的国内空间是有这个的可是我当时根本不知道啥用，如今没了。。。

3. Add an Expires or a Cache-Control Header 设置头文件过时或者静态缓存

浏览器会用缓存来减小http请求数来加快页面加载的时间，若是页面头部加一个很长的过时时间，浏览器就会一直缓存页面里的元素。不过这样若是 页面里的东西变更的话就要更名字了，不然用户端不会主动刷新，看本身衡量了~ 这项能够经过修改.htaccess文件来实现。

4. Gzip Components Gzip 压缩

Gzip格式是一种很广泛的压缩技术，几乎全部的浏览器都有解压Gzip格式的能力，并且它能够压缩的比例很是大，通常压缩率为85%。压缩没压缩，能够到 这里 作下测试。

5. Put Stylesheets at the Top 把 CSS 放顶部

让浏览者能尽早的看到网站的完整样式。

6. Put Scripts at the Bottom 把 JS 放底部

网站呈现完毕后再进行功能设置，固然这些JS要在你的加载过程当中不影响内容表现。

7. Avoid CSS Expressions 避免CSS Expressions

CSS表达式很可怕，这个只被IE支持的东西执行时候的运算量很是大，你移动一下鼠标它都要进行重计算的，但有时候为了作浏览器的兼容必需要用到这个||| IE6去死去死！

8. Make JavaScript and CSS External 将 JS 和 CSS 外链

前面讲到了缓存这个事情，一些较为公用的JS和CSS，咱们可使用外链的形式，譬如我就是从Google外链来的Jquery文件，若是个人浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件，那么他在浏览个人网站的时候就不须要再进行下载了！

9. Reduce DNS Lookups 减小 DNS 查找

貌似是要减小网站从外部调用资源，个人Google分析和picasa的外链图片都算在里面了。

10. Minify JavaScript and CSS 减少 JS 和 CSS 的体积

写JS和CSS都是有技巧的，用最少的代码实现一样的功能，减小空白，加强逻辑性，用缩写方式等等，固然也有很多工具也可以帮你实现这一点。

11. Avoid Redirects 避免重定向

再写入连接时，虽然 http://www.test.com 和 http://www.test.com/ 仅有一个最后的 / 只差，可是结果是不一样的，服务器须要花时间把前者重定向为后者而后进行跳转，这个要本身注意，也能够在Apache里用Alias 或者mod_rewrite或者DirectorySlash解决。

12. Remove Duplicate Scripts 删除重复脚本

重复调用的代码浏览器并不会识别忽略，而是会再次运算一遍，这固然是大大的浪费。

13. Configure ETags 配置 ETags

搞不清楚咋回事，总之我是在.htaccess里把它删除了。

14. Make Ajax Cacheable 缓存 Ajax

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 404 不要出现 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 就不支持。

关注我，下一篇介绍《使用 Chrome 开发者工具 performance 检测页面性能》～