<script src="a.js"></script>
没有defer或async属性,浏览器会立即加载并执行相应的脚本。不等待后续文档元素的加载,只要读到就开始加载和执行,这样做会阻塞后续文档的加载。
<script async src="a.js"></script>
如果有async属性,文档的加载和渲染与js脚本的加载和执行是并行执行的,就是异步执行。
<script defer src="a.js"></script>
有了defer属性,文档的加载和渲染和js脚本的加载是并行执行的(请注意,js脚本只加载不执行),js的执行需要等到文档所有元素解析完成之后,DOMContentLoaded事件触发之前。
蓝色代表js脚本网络加载时间,红色代表js脚本执行时间,绿色代表html解析。
从上图中可以明确几点:
1、defer和async的网络加载过程是一致的,都是异步执行。
2、区别在于加载完成之后什么时候执行,可以看出defer是文档所有元素解析完成之后才执行的。
3、如果存在多个defer脚本,那么它们是按照顺序执行脚本的,而async,无论声明顺序如何,只要加载完成就立刻执行