经常会在一些地方看到一些<script>标签带上了defer和async，总是搞不清楚两者的具体区别，于是想记录下来。
从单词语义上来，defer代表延迟，async代表异步。那么我们就有一个基本的概念了。然后我们慢慢分析。
如果没有defer和async
<script>标签如果没有带上defer或async属性的话，浏览器会立即加载并执行标签内的脚本，意思大概是不等待后续载入的文档元素，读到这个<script>标签就加载并执行。
如果有defer
defer的意思是延迟，也就是说延迟执行，除了这一点，加载的过程是异步的。那么就很好解释了，当遇到
1 | <script defer> |
这种标签时，会开始加载script标签内容，但是不会阻塞后续文档元素的渲染，待所有页面元素解析完成后，DOMContentLoaded 事件触发之前执行这个script标签的代码。
如果有async
async就是sync的反义词，代表异步，也就是说异步加载和执行。所以，当遇到
1 | <script async> |
这种标签时，加载和执行脚本的同时不会阻塞其他文档元素的渲染。
多个标签的情况
还有一点要注意的就是，多个async标签是不会相互影响的，谁先加载完，谁就先执行了。而多个defer标签是异步加载，但是最后执行的顺序是根据其在页面上的顺序来决定的。
现在是不是觉得豁然开朗了呢？
扫一扫下方小程序码或搜索Tusi博客，即刻阅读最新文章！
