异步加载脚本

异步加载

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事件。