yahoo给出的关于网站优化的建议

 

1.使用CDN

　　内容分发服务器会根据用户的位置选择最近的服务器响应用户的请求，静态资源放在CDN的性能将提升20%左右。

2.设置Expires和Cache-Contral头

　　将静态资源的过期时间设置一个遥远的日期，那么这将是304请求

　　将动态资源设置一个Cache-Contral来帮助浏览器有条件的请求

　　这个时候我们的静态资源就要带上版本号了，以便于更新的时候可以获取到最新的代码

3.配置ETags

　　a) 客户端请求一个页面Page A

　　b)服务器返回Page A 连同ETags一起

　　c)客户端接收到Page A 并且缓存Etags

　　d)客户端再次请求Page A ，带上了缓存中的ETags一起发往服务器

　　e)服务器收到请求，发现Etags并未改变。直接返回响应304（未修改——Not Modified）和一个空的响应体。

4.使用get来响应Ajax请求

　　因为post请求是分成2次的。第一次会先发送请求头，第二次才发送数据。而get只需要发送一个数据包，但是限制在20K内。

5.尽量减少HTTP请求

　　合并CSS JS Image,使用CSS的background-position去定位图片。

　　如果一个CSS或者JS是通用模块，我认为也可以不需要合并，因为多次访问同一个资源是304

　　但是对于第一次访问web的用户，合并是最好的

6.减少NDS解析

　　因为DNS解析需要20-120ms，而在这期间浏览器是等待状态的。

　　但是考虑到并行下载需要多个域名，建议控制在4个以内。

7.避免重定向

　　重定向会导致用户访问的时间增加

　　一个经常发生的场景就是'/'，例如我们访问http://astrology.yahoo.com/astrology被301到

　　http://astrology.yahoo.com/astrology 。所以我们要是第一次就带上'/'，那么就避免了这次重定向。

8.减少DOM元素的数量

 　　过于复杂的DOM结构以为访问者下载更多的数据，javascript访问DOM的速度本身是很慢的，然而随着DOM数量的增加这会更加糟糕。

9.避免404错误

　　HTTP请求的代价是非常昂贵的，404会终止我们的并行下载，如果是js发生了404，浏览器还会试图从404的结果中找到js的内容。

10.把CSS放在页面顶部

 　　雅虎的研究表明把CSS放在head里面可以加快页面的渲染，因为允许了浏览器获取到DMO就逐步渲染。浏览器为了避免重绘页面，

　　需要等待把CSS加载完后才知道如果渲染。如果你把他们放在底部了，那么将会因为没有施工图纸而无法开工。

11.避免使用CSS表达式

12.避免使用@import来引入CSS

13.把JS放在页面的底部

　　HTTP/1.1规范建议同一域名下并行下载的资源数量不应该超过2个，如果图片存于不同的域名下面，那么不受此限制。js在下载的时候

会中断其他资源的下载即使是其他域名下面的。所以让js最后加载会使得页面加载等更流畅。

14.使用外链的JavaScript和CSS

　　因为外链的JavaScript和CSS可以更好的被浏览器缓存，特别是多页面的共同引用某个JS或者CSS时。虽然这增加了HTTP请求的数量，

但是对于后面的访问来说则不然了。

15.压缩JavaScript和CSS

　　压缩JS和CSS可以提高下载的速度，使文件变得更加苗条了。

16.减少DOM操作

　　因为JS访问DOM天生就慢，所以应该采取相应的措施：

　　　　a)缓存已经访问过的节点

　　　　b)'离线'操作DOM，完成以后再一次性添加到对应的DOM

　　　　c)避免使用JS来布局页面

17.使用智能事件

　　如果你有10个按钮在div.btns里面，你把事件绑定到button上面，将会有10个监听器。而如果使用代理给div.btns那么只需要一个监听器。

18.优化图片

 　　目前我在使用Grunt的插件来优化我们的图片，优化以后的图片尺寸明显小了很多。

19.不要在HTML中缩放图像

　　比如你的图片是100px * 100px 的，那么img标签里面的尺寸应该是 100px * 100px.如果需要自适应的话是否应该考虑CSS3呢？

20.移动端

　　a)不要使用大于25KB的组件（这里是指未压缩的尺寸），iphone不会缓存大于这个数字的组件。