又是一个经典面试八股文,但是我还是被问到尬住,特此学习实践并记录。
目录
1. 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 和防阻塞方法 - 掘金 |