JavaScript系列—script defer和async的用法和区别

爱被打了一巴掌 2021-11-16 15:22 336阅读 0赞

### 1.script defer是什么 ###

> **HTML <script> 标签的 defer 属性**

** 示例**

<html>
    <body>
    
    <script type="text/javascript" defer="defer">
    alert(document.getElementById("p1").firstChild.nodeValue);
    </script>
    
    <p>上面的脚本会从下面的段落中请求信息。通常，这是做不到的，因为在段落加载之前，脚本已经运行过了。</p>
    
    <p id="p1">Hello World!</p>
    
    <p>然而，defer 属性规定了脚本必须在页面加载完毕后执行。这样，脚本就可以从段落中请求数据了。</p>
    
    <p><b>注释：</b>该属性只能在 Internet Explorer 中运行。</p>
    
    </body>
    </html>

**定义和用法**

defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。

有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。

如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。

### 关于defer和async的区别 ，看一下《JS高程》的解释 ###

向 HTML 页面中插入 JavaScript 的主要方法，就是使用 <script> 元素。这个元素由 Netscape 创造  
并在 Netscape Navigator 2中首先实现。后来，这个元素被加入到正式的 HTML 规范中。HTML 4.01 为  
<script> 定义了下列 6 个属性。

async ：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或  
等待加载其他脚本。只对外部脚本文件有效。

defer ：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有  
效。IE7 及更早版本对嵌入脚本也支持这个属性。

**看一个网上的答案（写的很好）**

先来试个一句话解释仨，当浏览器碰到 `script` 脚本的时候：

1.  `<script src="script.js"></script>`
    
    没有 `defer` 或 `async`，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 `script` 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
2.  `<script async src="script.js"></script>`
    
    有 `async`，加载和渲染后续文档元素的过程将和 `script.js` 的加载与执行并行进行（异步）。
3.  `<script defer src="myscript.js"></script>`
    
    有 `defer`，加载后续文档元素的过程将和 `script.js` 的加载并行进行（异步），但是 `script.js` 的执行要在所有元素解析完成之后，`DOMContentLoaded` 事件触发之前完成。

然后从实用角度来说呢，首先把所有脚本都丢到 `</body>` 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

接着，我们来看一张图咯：

![请输入图片描述][aHR0cDovL3NlZ21lbnRmYXVsdC5jb20vaW1nL2JWY1FWMA]

蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。

此图告诉我们以下几个要点：

1.  *defer* 和 *async* 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）
2.  它俩的差别在于脚本下载完之后何时执行，显然 *defer* 是最接近我们对于应用脚本加载和执行的要求的
3.  关于 *defer*，此图未尽之处在于它是按照加载顺序执行脚本的，这一点要善加利用
4.  *async* 则是一个乱序执行的主，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行
5.  仔细想想，*async* 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics

[aHR0cDovL3NlZ21lbnRmYXVsdC5jb20vaW1nL2JWY1FWMA]: https://imgconvert.csdnimg.cn/aHR0cDovL3NlZ21lbnRmYXVsdC5jb20vaW1nL2JWY1FWMA