阅读 948
HTML script标签async和defer的区别

HTML script标签async和defer的区别

这是我参与8月更文挑战的第4天,活动详情查看:8月更文挑战

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属性。

若有多个scriptdefer属性,推迟执行的脚本不一定总会按顺序执行或者在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 src="script.js"></script>

简单地说,如果:

  • 既没有defer也没有async属性,则浏览器遇到该script标签时,会立即加载执行指定的脚本。执行完毕后,才继续解析后面的标签。
  • async 属性,浏览器遇到该script标签时,加载脚本的过程与解析后面标签的过程同时进行。加载完毕后,单独执行该脚本。
  • defer属性,浏览器遇到该script标签时,加载脚本的过程与解析后面标签的过程同时进行。但是执行脚本的过程,在解析完所有元素之后才执行。可以这样理解:defer本身就有推迟的意思,在加载完脚本后,将执行过程推迟到最后
文章分类
前端
文章标签