web前端优化之浏览器渲染优化

用户访问买个页面要通过请求和等待两个过程，这个瞬间大概消耗了一下几部分时间：

（1）数据在网络上传输的时间；

（2）站点服务器接受处理请求并生成回应数据的时间；

（3）浏览器在本地渲染的时间。

主要分析浏览器渲染优化

（1）减少http请求的次数，因为每个请求都要通过以上三步才能返回完全正常的数据，根据功能和数据加载流程合并相应的js,css,images 减少其请求的次数；

（2）减少带宽，压缩对应的文件去掉一些空格，注释提高相应速度；

（3）把样式表放在上面可以“显式”地提高页面的显示效率。我之所以称之为“显式”，是因为用户眼睛看到和感觉上的速度提升，实际的页面传输效率并没有得到提高。 但这么做不代表它是无意义的，在某些时候，你明明已经看到页面已经下载完毕，但却发现它的布局还在不断地变化，这是因为样式表没有进行初始化的原因。

（4）把脚本放到下面，可以减少浏览器的等待时间，将文档的显示提高的最高的优先级显示，然后再执行脚本，这样用户几乎就感觉不到等待。

（5）将JavaScript和CSS存放到外部文件中，可以有效地将js, css文档缓存到本地，当你请求同样包含以上js, css的脚本的时候，便无需重新下载，直接从缓存中载入了。此外，它还有一个很明显的优点，就是增强了可重用性，你不必在每个页面都重复地写上一大串的代码，造成资源和带宽的浪费。

(6)用data:URL scheme的方式把图片内容代码直接嵌入html代码中，这样会增大html代码的体积，改进的方式是把内嵌图片嵌入到css中（css被缓存），这样就会更好的减少http请求数而且不增大html的体积。

(7)利用GZip和缓存控制头（Cache-Control headers）使用Etags减少web应用宽带和负载