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应用宽带和负载