瀏覽器資源渲染阻塞

瀏覽器資源渲染阻塞 英文學名：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的實際被覆蓋率。