tinyshare微博账号
Chrome中加载JavaScript的优先级 四月 1, 2019

浏览器如何安排和执行脚本可以影响web页面的性能。虽然像<script defer><link ref="preload">(和其他等)这样的技术可以应该脚本的执行,但是知道浏览器如何解析它们也是很有帮助的。得益于Kouhei Ueno,我们现在有了Chrome中脚本安排的最新的摘要。

加载优先级
(network/Blink)
执行优先级可以在哪里使用这个?
<head>中的<script>中等/高非常高 -
阻塞解析
<link rel=preload> +
<script async> hack

<script type=module async>

中等/高高-
中断解析
  • 生成关键内容的脚本(FMP所需)
  • 但是不能影响页面的褶皱布局
  • 触发动态插入内容的网络请求的脚本
  • 脚本的imports一请求完就需要执行,使用<script async type=module>

     

    示例:
    • <canvas>上绘制一些东西
<script async>最低/低高 -
中断解析
考虑<script async>的时候要小心。它现在常被用于表示非主要脚本,但是它被以低优先级加载且以高优先级被执行,两者很不一致。
<script defer>最低/低很低 -
<body>末尾的<script>s之后运行
  • 脚本生成非主要内容
  • 脚本提供关键互动功能>50%的页面视图session可以使用

     

    示例:
<body>末尾的<script>中等/高低 -
等待解析结束
使用<body>末尾的<script>时,如果你觉得他们的优先级低,那你要小心了。这些脚本会以中等/高优先级进行安排
<body>末尾的<script defer>最低/低 -
在队列的末尾
很低 -
<body>末尾的<script>s 后面运行
  • 可能偶尔会用于提供交互性功能的脚本

     

    示例:
    • 加载“相关文章”
    • “意见反馈”功能
下一页导航中的<link rel=prefetch> + <script>空闲的/最低的取决于脚本何时和如何被调用倾向于为一个下一页导航提供重要的功能的脚本

 

示例:
  • 未来路由的JavaScript包

注意:加载的优先级不保证在跨浏览器中是一致的,所以在不确定的时候可以机智地使用这个知识来测试。理想情况下,目标是向尽可能多的用户提供出色的体验。

如果你是一个web开发者,想知道在哪里能看到“加载优先级”,Chrome DevTools在Network面板中有一个可选的“Priority”列。右击列头,就可以切换显示它了:

上面的优先级摘要截止2019年二月份仍是有效的。我个人也乐于对其他浏览器的加载优先级有了更好的理解。希望这个纵览对其他人是有帮助的。

感谢Kouhei, Dom Faralino, Pat Meenan, Kenji Baheux 和 Yoav Weiss 对更好地解释Chrome的网络栈做出的贡献。

深入阅读