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

html中script标签的defer与async属性

经常会在一些地方看到一些 < script > 标签带上了defer和async，总是搞不清楚两者的具体区别，于是想记录下来。
从单词语义上来，defer代表延迟，async代表异步。那么我们就有一个基本的概念了。然后我们慢慢分析。

• defer是html4.0中定义的，该属性使得浏览器能延迟脚本的执行，等文档完成解析完成后会按照他们在文档出现顺序再去下载解析。也就是说defer属性的< script >就类似于将< script >放在body的效果。

• async是HTML5新增的属性，IE10和浏览器都是支持该属性的。该属性的作用是让脚本能异步加载，也就是说当浏览器遇到async属性的< script >时浏览器加载css一样是异步加载的。

如果没有defer和async

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

如果有defer

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

<script defer>

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

如果有async

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

<script async>

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

多个标签的情况

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

总结一下

1、defer 和 async 在网络读取（脚本下载）这块儿是一样的，都是异步的（相较于 HTML 解析）

2、defer 是最接近我们对于脚本加载和执行的要求的。defer是立即下载但延迟执行，不阻塞加载后续文档元素的过程，但是脚本的执行要在所有元素解析完成之后，在DOMContentLoaded 事件触发之前完成，多个defer脚本按声明的顺序执行。async是立即下载并执行，也不阻塞加载后续文档元素的过程，下载完立即执行。

3、async的脚本不保证按照指定它们的先后顺序执行。无论你声明的顺序是什么，只要它加载完了就会立刻执行。

4、async 完全不考虑依赖，不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的。