理解html中script标签的defer与async属性

html中script标签的defer与async属性

经常会在一些地方看到一些 < script > 标签带上了defer和async，总是搞不清楚两者的具体区别，于是想记录下来。

从单词语义上来，defer代表延迟，async代表异步。那么我们就有一个基本的概念了。然后我们慢慢分析。

1.如果没有defer和async

< script > 标签如果没有带上defer 或 async属性的话，浏览器会立即加载并执行标签内的脚本，意思大概是不等待后续载入的文档元素，读到这个< script > 标签就加载并执行。

2.如果有defer

defer的意思是延迟，也就是说延迟执行，除了这一点，加载的过程是异步的。那么就很好解释了，当遇到

<script defer>

这种标签时，会开始加载script标签内容，但是不会阻塞后续文档元素的渲染，待所有页面元素解析完成后，DOMContentLoaded 事件触发之前执行这个script标签的代码。

3.如果有async

async就是sync的反义词，代表异步，也就是说异步加载和执行。所以，当遇到

<script async>

这种标签时，加载和执行脚本的同时不会阻塞其他文档元素的渲染。

4.多个标签的情况

还有一点要注意的就是，多个async标签是不会相互影响的，谁先加载完，谁就先执行了。而多个defer标签是异步加载，但是最后执行的顺序是根据其在页面上的顺序来决定的。

现在是不是觉得豁然开朗了呢？