前端性能优化--雅虎军规

前端性能优化，永远是个说不完的话题。好在搜索先驱的雅虎对优化性能有了较为具体的总结，让我们能够将经验直接用到实际工作中去。

1.减少HTTP请求次数

尽量减少图片、CSS、JS的个数。采用CSS精灵或者合并文件的方法，以减少http请求，节省网络请求，加快页面加载。

2.使用CDN

网站上的静态支援可以使用cdn，加快响应速度。

3.避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。

4.为头文件指定Expires

Expires是用来设置资源的过期时间的，一般对css、js、图片有用。他可以使资源具有缓存性，这下，下次访问的话（不过期），就可以读取浏览器的缓存，不需要在此发送http请求了。

5.使用gzip压缩内容

gzip能够压缩任何一个文本类型的响应内容，包括html、css、json等格式。减小响应的数据大小。

6.将CSS放到顶部

页面上的资源都是从上到下加载的，将CSS文件放在顶部可以优先渲染页面，让用户能感受页面的快速响应。

7.将JS放到底部

因为执行JS时会阻塞后续的资源，所以将JS脚本放在最后。

8.避免使用CSS表达式

这个表达式会持续的在页面上计算样式，影响页面的性能。而且，CSS表达式只能被IE支持。

9.将CSS和JS放到外部文件中

目的是缓存文件，但有时为了减少请求，也会直接写道页面中。

10.权衡DNS查找次数

减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。 IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以可以用二级域名来存放图片。

11.精简CSS和JS

压缩CSS和JS，减少文件的大小，一些主流的压缩工具都能够进行css和js的压缩。

12.避免跳转

同域下，注意避免反斜杠 “/” 的跳转。不同域下时，使用Alias或者mod_rewirte建立CNAME（保存域名与域名之间关系的DNS记录） 来替代。

13.删除重复的JS和CSS

重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。

14.配置Etags

它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。

服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载 。

15.可缓存的AJAX请求

异步请求同样会照成用户的等待，所以使用Ajax请求时，要设置浏览器有缓存时就去使用缓存。

16.使用GET来完成AJAX请求

当时用XMLHttpRequest时，浏览器中的POST方法会走两步，首先发送文件头，然后发送数据。因此使用GET方式更便捷。

17.减少DOM元素数量

这会引申出一堆优化的细节，总之，减少DOM数量，就会减少浏览器的解析负担。

18.避免404

比如外链的css、js文件出现问题返回404时，会破坏浏览器的并行加载。

19.减少cookie的大小

减小cookie，因为每次请求都得带上cookie。

20.使用无cookie的域

比如图片、css、js等，客户端请求静态文件的时候，减少了cookie的反复传输对主域名的影响。

21.不要使用滤镜

IE下独有属性AlphaImageLoader用于修正IE7下显示PNG图片的半透明效果，会增加内存的开销，引起多方面的问题。可以使用PNG8格式来代替。

22.不要再HTML中缩放图片

比如你需要一张50*50的图片，那就不用加载一张500*500的图片。

23.缩小favicon.ico并缓存

站点的icon应该不是经常换吧，那就长时间的缓存它，并且最好控制在1K以下。