浏览器如何安排和执行脚本可以影响web页面的性能。虽然像<script defer>，<link ref="preload">（和其他等）这样的技术可以应该脚本的执行，但是知道浏览器如何解析它们也是很有帮助的。得益于Kouhei Ueno，我们现在有了Chrome中脚本安排的最新的摘要。
| 加载优先级 (network/Blink) | 执行优先级 | 可以在哪里使用这个？ | |
<head>中的<script> | 中等/高 | 非常高 - 阻塞解析 | |
<link rel=preload> +<script async> hack或
| 中等/高 | 高- 中断解析 |
|
<script async> | 最低/低 | 高 - 中断解析 | 考虑<script async>的时候要小心。它现在常被用于表示非主要脚本，但是它被以低优先级加载且以高优先级被执行，两者很不一致。 |
<script defer> | 最低/低 | 很低 - 在 <body>末尾的<script>s之后运行 | |
<body>末尾的<script> | 中等/高 | 低 - 等待解析结束 | 使用<body>末尾的<script>时，如果你觉得他们的优先级低，那你要小心了。这些脚本会以中等/高优先级进行安排 |
<body>末尾的<script defer> | 最低/低 - 在队列的末尾 | 很低 - 在 <body>末尾的<script>s 后面运行 |
|
下一页导航中的<link rel=prefetch> + <script> | 空闲的/最低的 | 取决于脚本何时和如何被调用 | 倾向于为一个下一页导航提供重要的功能的脚本 示例：
|
注意：加载的优先级不保证在跨浏览器中是一致的，所以在不确定的时候可以机智地使用这个知识来测试。理想情况下，目标是向尽可能多的用户提供出色的体验。
如果你是一个web开发者，想知道在哪里能看到“加载优先级”,Chrome DevTools在Network面板中有一个可选的“Priority”列。右击列头，就可以切换显示它了：
上面的优先级摘要截止2019年二月份仍是有效的。我个人也乐于对其他浏览器的加载优先级有了更好的理解。希望这个纵览对其他人是有帮助的。
感谢Kouhei, Dom Faralino, Pat Meenan, Kenji Baheux 和 Yoav Weiss 对更好地解释Chrome的网络栈做出的贡献。
4354
2019.4.1 