参考 雅虎开发文档
https://developer.yahoo.com/performance/rules.html?guccounter=1
入手点
数据显示,80%的用户会花费时间在前端页面,也就是说一个好的UI设计能够抓住用户的眼球,而好的UI性能会抓住用户的心。
而影响页面渲染的原因是什么呢?当我们打开一个网页的时候,文档开始解析,大多数时间都花费在下载css script images等资源,所以我们应该从此入手。
所以减少这些组件的体积和数量就能减少http请求的数量,进而就能优化网站性能。给这些组件瘦身也就是减少HTTP请求时间的关键,下面来说一下优化的几个方法。
- 将所有的js css都各自整合
- 图片用精灵图,通过background-image 和 background-positon来操作,还有一个内联图片的方式,就是通过data:URL的方式来将图片嵌入到页面中,虽然HTML的体积增大,但是这也是减少HTTP请求的的方法,这种方法还没有在所有主流浏览器中得到支持
- 使用CDN,
- 添加expires或cache-control头部,将静态资源进行缓存,
有以下两个法则:
对于静态资源,设置为永不过期
对于动态资源,设置合适的cache-control来帮助浏览器处理额外的请求 - 使用GZIP组件,
Accept-Encoding: gzip, deflate
,将资源进行压缩 - 将CSS文件放在顶部 JS放在底部