关键渲染路径优化

如何优化关键渲染路径,上一章初步了解了关键渲染路径的流程,此时,可以对此做一定的优化。我们可以从三个大类方向优化

一、减少网络发送的数据量

     1.采用精简(移除注释,空格)、混淆(额外缩短变量名)的方式

     2.gzip压缩,现在绝大部分浏览器都支持gzip压缩

     3.部分资源可考虑采用内联的

     4.静态资源采用浏览器缓存,时间要长

二、减少关键资源的数量,移除非关键渲染资源

  1.css默认会生成cssom。通过非关键资源拆出来,单独外联引入,增加media,则浏览器只会下载,不会解析(用到的时候解析)。但是此时额外增加了网络请求,需要权衡

      2.js执行会等待cssom构建完毕,并且会阻塞dom的构建。动态引入js  

三、缩短关键呈现路径的长度

     1.通过外联js加async,则不会等待cssom,异步执行,不阻塞dom构建

posted @ 2017-02-15 09:21  coopermc  阅读(289)  评论(1编辑  收藏  举报