本文译自 -> 传送门
作者：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 代码文件的 “解析器阻塞” 影响应该是控制在最小的。
