在html页面中当我们需要加载一些资源的时候，例如加载一些工具方法，为了避免阻塞，往往是采用的是异步加载，还有一种就是按需加载，例如一些工具方法，等到用到的时候再去加载。
javascript异步加载资源的三种方案
- defer 异步加载，在script标签上加上这个属性, 它既可以异步加载外部脚本，也就是src引入的，也可以加载内部代码，也就是script内部写的代码， 但它要等到dom文档全部解析完才会被执行，也就是domtree生成后，并且只有IE能用。
- async 异步加载，同样的在script上加上async属性，就可以实现异步加载资源，script标签加载完就执行，async只能加载外部脚本，不能异步加载内部代码
- 为了实现兼容，我们一般不像上面那样写，我们可以李荣src属性加载资源时会自动开启线程加载资源来实现，方法是我们自己创建一个script标签,并且指定src属性。代码像下面这样
<script>
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'demo.js' //异步加载
if (script.readyState) {
script.onreadystatechange = function () {
if (script.readyState = "complete") {
//资源加载完毕
}
} //IE
} else {
script.onload = function () {
//资源加载完毕
} // 非IE
}
document.head.appendChild(script)
</script>注意事项:
- 一般dom节点的删除添加以及它的宽高变化、位置变化等物理变化会导致重新绘制rendertree(reflow), 效率极低，尽量避免少做这些操作，而css变化是重绘，也会影响一些效率、但是不严重
- 异步操作中，一般先绑定事件，在做其他操作，避免操作完毕不触发事件，例如ajax里面
- 在异步加载js文件的时候，不能有document.write（） 它会清空整个页面将自己的东西覆盖之前的东西
- 一般我们如果要等到全部解析完成，我们一般是直接将script写到最下面，但是这不是全部正确的，一般这样写：document.addEventListener('DOMContentLoaded', function () { }, false)，监听这个事件的话可以确保dom已经解析完毕
javascript加载时间线(9步)
- 创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = 'loading'。
- 遇到link外部css，创建线程加载，并继续解析文档。
- 遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。 遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。 对于async属性的脚本，脚本加载完成后立即执行。（异步禁止使用document.write()）
- 遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。
- 当文档解析完成，document.readyState = 'interactive'。
- 文档解析完成后，所有设置有defer的脚本会按照顺序执行。（注意与async的不同,但同样禁止使用document.write()）;
- document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
- 当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = 'complete'，window对象触发load事件。