Web前端性能优化的14条规则

1.减小Http请求

• 使用图片地图
• 使用CSS Sprites
• 合并JS和CSS文件

这个是因为浏览器对同一个host有并行下载的限制,http请求越多,整体下载速度越慢

2.使用CDN(内容发布网络):当页面中有不少资源的时候,能够从不一样的服务中去读取,同时能够提升并行下载速度

3.添加http Expires头:为图片视频之类不多改变的资源设置长的Expires时间将直接减小http请求

• 若是资源设置了Expires头为未来的某个时间,下次访问时候浏览器发现资源尚未过时,会直接从缓存中读取,不会再次产生http请求

另一个有点相似的概念是条件Get请求,某些资源好比JS文件,若是咱们老是须要最新的JS 文件,那么能够设置条件Get请求去服务端验证本地的资源是否须要更新.这种状况下浏览器会向Server发送一个http请求,若是资源没有更新,会返 回一个http 304的response,若是资源跟新,则从新下载资源:

 

条件Get请求每次都会产生一个304的请求

4.压缩组件:在Server端对Response资源进行压缩再传给浏览器,通常使用GZIP

5.将CSS放再顶部: 能加快页面内容显示,而且能避免页面产生白屏

6.将JS放在底部

• JS会阻塞对其后面内容的呈现
• JS会阻塞对其后面内容的下载

7.避免CSS表达式

8.将JS,CSS放在外部文件中

9.经过使用Keep-Alive和较少的域名来减小DNS查找

10.精简JS和CSS文件

11.寻找一种避免重定向的方法

12.移除重复的脚本

13.配置Etag

14.确保Ajax请求遵照性能知道,必要时候应具有长久的expires头

 

咱们可使用Yahoo的Yslow firefox插件来检查网站的前端性能.

最后,咱们随便打开一个淘宝宝贝页面,用Fiddler查看一下,发现淘宝至少作了以下优化:

• 大规模使用CDN,图片,jS,css互相之间都使用了不一样的域名.单是图片服务器,下面又使用了不少不一样的服务器,好比img01.taobaocdn.com等等
• 当第二次浏览同一宝贝的时候,产生大量的Http 304请求.这样既能保证获取最新的资源,又能尽可能减小数据传输
• CSS,JS文件大都精简过
• 对于资源类的东西好比图片,设置为不受保护.也就是说不须要登陆依然能够直接访问的,这样就避免设置/读取cookie,达到节省网络资源的目的

惟一一点没有优化的是图片,服务端返回的图片都是没有Gzip压缩的,或许是为了减小服务器的压力

 

转载地址：http://lijingshou.iteye.com/blog/1965739