浏览器资源渲染阻塞

浏览器资源渲染阻塞 英文学名：Render-Blocking Resources，在使用Google 开发者工具Lighthouse的时候，它会帮助开发者生成页面渲染报告，在报告中将阻塞页面渲染的资源分为三类：HTML JS CSS,

For critical scripts, consider inlining them in your HTML. For non-critical scripts, consider marking them with the async or defer attributes. See Adding Interactivity with JavaScript to learn more.

• 对于重要的JS，那就直接让其渲染，对于不重要的js 文件，在其脚本script上添加async或defer属性；
• 在CSS方面，将CSS分成不同的文件，然后根据不同的设备进行媒体查询去读取指定的CSS文件。
• 对于不重要的HTML 在其标签上添加async属性。

Coverage的使用

打开chrome 开发者工具，然后点击右上角的三点Icon, 在More tools中选择coverage,可以看出js,css的实际被覆盖率。

转载于:https://juejin.im/post/5c4a71906fb9a049cd548f5a