异步加载脚本

异步加载

defer属性和async属性提供了异步加载脚本的方法。使用如下

<script defer src="test.js"></script>
<script async src="test.js"></script>

使用defer和async属性的外链脚本，告诉浏览器它们不会包含document.write方法，所以浏览器在遇到它们的时候，不用停下来等脚本下载完毕并执行之后再继续解析和渲染文档。这两者有一些区别

1. defer属性的脚本会按照它们在文档中的顺序执行，async属性的脚本不一定按顺序执行，哪个脚本先下载完就先执行
2. defer在DOMContentLoaded事件发生前执行，async脚本可能在DOMContentLoaded事件前执行，也有可能在之后执行，但是肯定在loaded事件前执行。

注意：由于不同的浏览器实现，defer事件也不一定会在DOMContentLoaded事件前执行

客户端js时间线

1. 浏览器创建document对象，开始解析文档，document.readyState=loading
2. 碰到同步脚本，就停止解析，下载脚本并执行，碰到异步脚本就异步加载。async脚本加载完就执行，defer脚本加载完等待。
3. 当文档完成解析，document.readyState=interactive
4. defer脚本按顺序执行
5. 在document对象上触发DOMContentLoaded事件，可能还存在异步脚本未执行完。
6. 当文档完成解析、脚本加载并执行完毕，可能还有些资源未载入，比如图片之类的。等所有资源到位后，document.readyState=complete，并在window对象上触发load事件。