浏览器如何调度和执行脚本会影响网页的性能。虽然像 <script defer>，<link rel=preload>（以及其他）这样的技术会影响脚本加载，但了解浏览器如何解释它们也是有帮助的。感谢 Kouhei Ueno，我们现在有了一个关于 Chrome 中脚本调度的最新总结。
| 加载优先级 (network/Blink) | 执行优先级 | 什么时候用 | |
|---|---|---|---|
<head>中的 <script> | 中/高 | 非常高 - 阻断解析 | - 影响 First Meaningful Paint (FMP) / First Contentful Paint (FCP) 内容布局的脚本 - 必须在其他脚本之前运行的脚本 例如 - 影响整个页面 DOM 结构的 A/B 测试 - Framework runtime (if not static-rendered) - Polyfills |
<link rel=preload> + <script async> 或 <script type=module async> | 中/高 | 高 - 中断解析 | - 生成关键内容的脚本（FMP 所需） 但不应影响页面的首屏布局 - 触发网络获取动态插入内容的脚本 - 获取导入后需要立即执行的脚本 <script async type=module> 例如 - 在 canvas 上绘制内容 |
<script async> | 中/高 | 高 - 中断解析 | 考虑<script async>时要小心。如今，它经常用于指示非关键脚本，但在低优先级加载和高优先级执行方面不一致。 |
<script defer> | 最低/低 | 非常低 - 在<body>底部的<script>执行后，再执行 | - 非关键内容的脚本 - 超过 50% 的页面浏览会话将使用的交互功能的脚本 |
<body> 底部的 <script> | 最低/低 | 低 - 等待脚本解析结束后执行 | 当您认为 <script> 的优先级较低时，在 <body> 末尾使用 <script> 时要小心。这些脚本被调度为中/高优先级加载 |
<body> 底部的 <script defer> | 低/最低 | 在body底部 script 执行完后 | 提供偶尔使用的交互功能的脚本 |
下次页面打开时<link rel=prefetch> + <script> | 闲置/最低 | 取决于脚本的使用时间和方式。 | 脚本很可能为下一页提供重要的功能 |
注意：加载优先级不能保证跨浏览器一致，因此请明智地使用这些知识，并在不确定时进行衡量。理想情况下，目标是为尽可能多的用户提供良好的体验。
如果您是一名 Web 开发人员，想知道在哪里可以看到“加载优先级”，Chrome DevTools 在“网络”面板中提供了一个可选的“优先级”列。右键单击列标题，您可以将其打开：
截至 2019 年 2 月，上述优先级摘要仍然适用。我个人也希望更好地了解其他浏览器中的加载优先级。希望这个概述对那里的人有用！
感谢 Kouhei、Dom Faralino、Pat Meenan、Kenji Baheux 和 Yoav Weiss 为帮助更好地解释 Chrome 网络堆栈所做的贡献。
