likes
comments
collection
share

HTML script标签async和defer的区别这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战 1.

作者站长头像
站长
· 阅读数 15

1. defer

这个属性表示脚本在执行的时候不会改变页面的结构。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素上设置defer属性，相当于告诉浏览器立即下载，但延迟执行。

<!DOCTYPE html>
<html>
    <head>
        <title>Example HTML Page</title>
        <script defer src="example1.js"></script>
        <script defer src="example2.js"></script>
    </head>
    <body>
        <!-- 这里是页面内容 -->
    </body>
</html>

虽然这个例子中的<script>元素包含在页面的<head>中，但它们会在浏览器解析到结束的</html>标签后才会执行。

defer属性仅适用于外部脚本（只有在使用src属性时），因此浏览器会忽略行内脚本的defer属性。

若有多个script含defer属性，推迟执行的脚本不一定总会按顺序执行或者在DOMContentLoaded事件之前执行，因此最好只包含一个这样的脚本。

对defer属性的支持是从 IE4、Firefox 3.5、Safari 5 和 Chrome 7 开始的。其他所有浏览器则会忽略这个属性，按照通常的做法来处理脚本。考虑到这一点，还是把要推迟执行的脚本放在页面底部比较好。

2. async

从改变脚本处理方式上看，async属性与defer类似。当然，它们两者也都只适用于外部脚本，都会告诉浏览器立即开始下载。不过，与defer不同的 是，标记为async的脚本并不保证能按照它们出现的次序执行。

<!DOCTYPE html>
<html>
    <head>
        <title>Example HTML Page</title>
        <script async src="example1.js"></script>
        <script async src="example2.js"></script>
    </head>
    <body>
        <!-- 这里是页面内容 -->
    </body>
</html>

第二个脚本可能先于第一个脚本执行。因此，重点在于它们之间没有依赖关系。给脚本添加async属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。因此，标记为async的脚本并不保证能按照它们出现的次序执行。

3. 区别

HTML script标签async和defer的区别这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战 1.

对于 HTML 标签<script src="script.js"></script>。

简单地说，如果：

  • 既没有defer也没有async属性，则浏览器遇到该script标签时，会立即加载并执行指定的脚本。执行完毕后，才继续解析后面的标签。
  • 有async 属性，浏览器遇到该script标签时，加载脚本的过程与解析后面标签的过程同时进行。加载完毕后，单独执行该脚本。
  • 有defer属性，浏览器遇到该script标签时，加载脚本的过程与解析后面标签的过程同时进行。但是执行脚本的过程，在解析完所有元素之后才执行。可以这样理解：defer本身就有推迟的意思，在加载完脚本后，将执行过程推迟到最后。
转载自:https://juejin.cn/post/6992371218481414152
评论
请登录