JavaScript - 延迟 vs 异步
本文译自 -> 传送门
作者：Ire Aderinokun |
译者：fishc.com
JavaScript 被认为是 “解析器阻塞资源”。这意味着 HTML 文档自身的解析将被 JavaScript 阻塞。即当解析器到达 <script> 标签时，无论是内嵌还是引用外部代码，解析器都会暂停 HTML 的解析，转而获取（如果不是内嵌）并执行代码。
这种行为逻辑可能会导致一些问题，比如当我们在页面中加载多个 JavaScript 文件时，无论实际上是否需要用到它们，浏览器都会将它们全部载入，这样一来，网页的加载速度就受到了影响。
不过幸运的是，script 元素拥有两个属性：async 和 defer，它们允许你控制代码文件的获取和执行。
正常的执行流程
在研究这两个属性之前，我们先看看正常情况下代码文件的执行流程。
在默认情况下，如上所述，JavaScript 文件将中断 HTML 文档的解析，以便获取（如果不是内嵌）并执行代码。
举个例子，下面代码中 script 元素位于页面中间的某个位置：
<html>
<head> ... </head>
<body>
...
<script src="script.js">
....
</body>
</html>
当文档解析器遍历页面遇到 <script> 标签时，会发生下面这种情况：
如上，HTML 解析将被代码的获取和执行所中断，从而延长了第一次绘制网页所需的时间。
async属性
async 属性用于告诉浏览器该代码可以被异步执行。
HTML 解析器在遇到该 <script> 标签的时候不需要停下来，HTML 文档的解析和代码的获取是同时进行的，直到外部文件获取完成，才会暂停下来执行代码。
<script async src="script.js">
该属性仅适用于引用外部代码文件的情况。
当文档解析器遍历页面遇到 <script> 标签时，会发生下面这种情况：
defer 属性
defer 属性用于告诉浏览器只有再 HTML 文档全部解析完成之后再支持代码文件。
<script defer src="script.js">
类似于异步加载代码（async），代码文件的获取和 HTML 文档的解析是可以并行的。然而，代码并不会再获取完成后立即执行，它会等到所有的 HTML 文档解析完毕后再执行。
应该选择异步，延迟还是正常执行代码？
那么问题来了，什么时候我们应该使用异步，时候使用延迟，什么时候又让它正常执行？
这视具体情况而定，但决定前请先考虑下面几个问题：
-
script 元素放置的位置？
只有当 script 元素没有放在 HTML 的末尾时，异步和延迟执行代码才有意义。
从 <html> 到 </html>，HTML 文档按顺序被解析。如果在关闭 </body> 标签之前放置了一个引用外部的 JavaScript 文件，那么使用异步或延迟加载代码就显得意义不大，因为此时解析器已经完成了绝大部分 HTML 文档的解析工作。 -
代码是否独立？
对于不依赖于其他文件或本身没有任何依赖关系的代码文件，async 属性将会非常有用，因为我们并不在意它什么时候被执行。这也是异步加载最常见的情况。 -
代码的执行是否依赖于完全解析后的 DOM？
在很多情况下，代码文件包含需要与 DOM 进行交互的功能。
或者，它可能依赖于页面上包含的另一个文件。
在这些情况下，必须在代码执行之前先完全解析 DOM。
通常，这样的代码文件将被放置到页面的底部，以确保 DOM 的所有内容已经被解析完毕。
然而，在出于任何原因需要将 script 元素放置在别处的情况下，可以使用 defer 属性。 -
是一个短小精悍的代码？
最后，如果代码尺寸相对较小，自身执行时间也很短，则将其定义为内嵌代码可能更加合适。
尽管内嵌代码会阻止 HTML 文档的解析，但如果执行代码的时间很短，它应该不是一个很大的干扰项。
另外，如果它依赖于其他文件，则可能需要短时间的阻塞（加载并）。
现代浏览器引擎的支持程度
各家浏览器开始支持 async 属性的版本号：
各家浏览器开始支持 defer 属性的版本号：
值得注意的是，这些属性的行为在不同的 JavaScript 引擎中可能略有不同。
例如，在 V8 中（Chromium），无论其属性如何，都将尝试在用于代码执行的单独专用线程上解析所有代码。在这种情况下，JavaScript 代码文件的 “解析器阻塞” 影响应该是控制在最小的。
