首页 编程 正文
558

消除阻塞式资源(Eliminate render-blocking resources)

有以下两种URL资源会阻塞渲染:
1,放置在<head>中的<script>脚本引用,并且未设置defer或async属性。
2,<link rel="stylesheet">样式引用,并且未设置disabled或media属性。

处理阻塞式资源的第一步,是区分出关键资源与非关键资源。把非关键资源提取出来,设置相应的属性(script设置defer或async,css设置disabled或media属性。)

通过chrome的开发者工具->Coverage Tab 可以分析出哪些资源是关键资源,观察每项资源的Unused Bytes数值可以了解资源中未使用的代码量。红绿柱状图可以帮助我们区分关键代码占比,其中红色表示非关键代码,绿色表示关键代码,关键代码是指第一次渲染所必须的代码。非关键代码并不是无用的代码, 而是不需要马上使用的代码。

针对未使用的代码,可以移除它。

针对非关键scripts代码,可以将非关键代码集中起来写在一个js文件中,并用<script>引用,并设置defer或者async属性。
同步js,async js 与 defer js的区别:


针对非关键CSS代码,同样将非关键代码集中起来写在单独的css文件中,使用preload技术加载它们,标准做法如示:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
这里的preload可能会因为浏览器不支持脚本而加载css失败,所以后面跟着加上<noscript>块。

还可以将css分成多个css文件,每个文件针对不出的media使用媒体查询来避免阻塞。如示:
<link href="style.css"    rel="stylesheet">
<link href="style.css"    rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css"    rel="stylesheet" media="print">
第一个声明阻塞渲染,适用于所有情况。
第二个声明同样阻塞渲染:“all”是默认类型,如果您不指定任何类型,则隐式设置为“all”。因此,第一个声明和第二个声明实际上是等效的。
第三个声明具有动态媒体查询,将在网页加载时计算。根据网页加载时设备的方向,portrait.css 可能阻塞渲染,也可能不阻塞渲染。
最后一个声明只在打印网页时应用,因此网页首次在浏览器中加载时,它不会阻塞渲染。
最后,请注意“阻塞渲染”仅是指浏览器是否需要暂停网页的首次渲染,直至该资源准备就绪。无论哪一种情况,浏览器仍会下载 CSS 资产,只不过不阻塞渲染的资源优先级较低罢了。

参考:
https://web.dev/render-blocking-resources/?utm_source=lighthouse&utm_medium=unknown
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
https://web.dev/defer-non-critical-css/







正在加载评论...