在 HTML 中会遇到以下三类 script：
<script src='xxx'></script><script src='xxx' async></script><script src='xxx' defer></script>
那么这三类 script 有什么区别呢？
-
script：会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML。 -
async script：解析 HTML 过程中进行脚本的异步下载，下载成功立马执行，有可能会阻断 HTML 的解析。 -
defer script：完全不会阻碍 HTML 的解析，解析完成之后再按照顺序执行脚本。
defer
如果你的脚本代码依赖于页面中的DOM元素（文档是否解析完毕），或者被其他脚本文件依赖。
例：
- 评论框
- 代码语法高亮
async
如果你的脚本并不关心页面中的DOM元素（文档是否解析完毕），并且也不会产生其他脚本需要的数据。
例：
- 百度统计
如果不太能确定的话，用defer总是会比async稳定
普通script, defer, async同时存在页面中:
1. 普通script执行完, 继续页面解析渲染; 页面解析渲染完, 才触发DOMContentLoaded事件。
2. defer脚本是在页面解析渲染完, DOMContentLoaded事件的触发前, 才执行defer脚本。
由于1,2这两点, 所以一定先执行普通script, 再执行defer脚本。
4. async脚本的下载和执行不计入DOMContentLoaded事件统计。
5. async脚本下载完, 就立刻执行, 且多个async脚本执行不按照页面中的脚本先后顺序。
由于4,5这两点, 所以async脚本执行与普通script, defer脚本无关, 那个时间点都有可能执行。
ps:
defer,async只对外联script脚本文件有效, 内联script脚本设置无效。
