关键渲染路径优化
如何优化关键渲染路径,上一章初步了解了关键渲染路径的流程,此时,可以对此做一定的优化。我们可以从三个大类方向优化
一、减少网络发送的数据量
1.采用精简(移除注释,空格)、混淆(额外缩短变量名)的方式
2.gzip压缩,现在绝大部分浏览器都支持gzip压缩
3.部分资源可考虑采用内联的
4.静态资源采用浏览器缓存,时间要长
二、减少关键资源的数量,移除非关键渲染资源
1.css默认会生成cssom。通过非关键资源拆出来,单独外联引入,增加media,则浏览器只会下载,不会解析(用到的时候解析)。但是此时额外增加了网络请求,需要权衡
2.js执行会等待cssom构建完毕,并且会阻塞dom的构建。动态引入js
三、缩短关键呈现路径的长度
1.通过外联js加async,则不会等待cssom,异步执行,不阻塞dom构建