【面试题-HTML】script标签执行时机，defer和async属性理解

原创已于 2022-10-30 00:03:42 修改 · 3.7k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html5

于 2022-04-15 10:40:36 首次发布

前端学习同时被 3 个专栏收录

23 篇文章

订阅专栏

HTML与CSS

6 篇文章

订阅专栏

面试题剖析

3 篇文章

订阅专栏

本文详细解析了async和defer在JavaScript脚本中的加载与执行特性，比较了它们在阻塞、执行顺序、适用场景和浏览器兼容性的差异，适合提升面试应对技巧。

又是一个经典面试八股文，但是我还是被问到尬住，特此学习实践并记录。

1. defer和async的共同特征（与不加有什么区别？）

2. defer与async区别

三. 参考

一. 理论学习

1. 默认标签对比（引入）

既然defer和async是script标签的属性，当然要知道默认的标签的加载时机，方便对比。

首先给一个很有趣的小代码引入我们的两个关键字属性：

<input type="text">
<script >
    alert("only one input element ?");
</script>
<input type="text">

上面的代码，在浏览器闪出提示框的时候，会出现几个输入框？

0个？1个？2个？

答案是：0

本来想着对比默认script标签的加载时机，结果发现了一个新问题。当然，这里给出浅显的个人见解：

1. 当浏览器解析到默认属性的script标签时，是立即加载并执行的。所以第二个input标签元素没出来很正常。

2. 但是为什么第一个DOM没有出来呢？因为DOM渲染是一个异步的任务。具体的缘由还需深入理解浏览器的页面渲染过程。但既然是异步的，后面紧跟我们立即执行的同步阻塞代码alert，也就不难理解为什么会阻塞到后面的DOM渲染了。

下图展示了没有附加任何属性的script标签加载执行时机。其中绿色的是HTML解析的时间，蓝色的是script标签加载（下载）的时间，红色的是script标签执行的时间。

不难看出来，如果script的体量很大，加载时间较久，这时候页面既没有解析HTML，也没有执行script脚本。这时候，终于可以引入我们的script标签属性async和defer了。

2. async（HTML5新增属性）

对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。

对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。

该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析。defer 在这一点上也有类似的作用。

这是个布尔属性：布尔属性的存在意味着 true 值，布尔属性的缺失意味着 false 值。

关于浏览器支持请参见浏览器兼容性。另可参见文章asm.js 的异步脚本。——引自MDN

我们可以做出如下理解：

script标签加上这个async属性可以不阻塞页面渲染就加载。由于是“尽快”执行，所以类似Promise.race()，一旦加载完毕即先执行。如下图所示，此时的script标签加载和HTML页面解析已经可以并行执行了。

当然，这个时候script的执行依旧会阻塞到后面的HTML解析，此时还会出现一个潜在问题：script标签之间的执行时机不确定。

如果我们在HTML文档中引入顺序如下：显然第一个script的加载时长会远大于第二个script的加载时长。由于第二个先加载完毕，所以它先执行。（突然间想到了操作系统的短任务优先...）

<script src="1M.js"></script>
<script src="10K.js"></script>

如果script间没有相互的依赖，因果关系，script标签使用async也可以。但是如果和执行顺序有关，那就不应该使用这个属性了。

如果我们想要保持并行加载的优点，同时又让HTML先解析完毕，再顺序执行script，那么就可以毫无痕迹地引入到下一个属性——defer。

3. defer属性

这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded (en-US) 事件前执行。

有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成。——引自MDN

我们可以做出如下理解：defer属性的script加载依旧可以并行，且它会在文档解析完成后再执行。

什么是DOMContentLoaded事件呢？就是所有的DOM已经加载完毕，但是CSS，图像，iframe等其他内容还没有加载好。

我们可以看到，此时的图已经完全没有灰色的解析暂停部分了。

需要注意的是defer也有失效的时候：

如果缺少 src 属性（即内嵌脚本），该属性不应被使用，因为这种情况下它不起作用。

defer 属性对模块脚本没有作用 —— 他们默认 defer。

二. 问题部分

了解了上述知识点，就不难回答下面的经典问题了。

1. defer和async的共同特征（与不加有什么区别？）

script标签加载时机：都能够使得script标签的加载和HTML解析并行执行。加载script标签时不会阻塞页面加载。

2. defer与async区别

1. 执行时机

具有defer属性的script标签在HTML文档解析完毕后，DOMContentLoaded事件调用前执行。
具有async属性的script标签在加载完毕后就执行。

2. 执行顺序

defer确保script标签的执行依旧有序。
async可能会导致乱序。

3. 作用范围

defer不支持内联script标签。
async支持内联script标签。

4. 引入时间：

defer是HTML4.0引入的。
async是HTML5.0引入的。

三. 参考

DOMContentLoaded	Window: DOMContentLoaded event - Web APIs \| MDN
图源	async vs defer attributes - Growing with the Web
防阻塞方法	script 标签执行与加载时机：defer、async 和防阻塞方法 - 掘金