javaScript 异步加载

在html页面中当我们需要加载一些资源的时候，例如加载一些工具方法，为了避免阻塞，往往是采用的是异步加载，还有一种就是按需加载，例如一些工具方法，等到用到的时候再去加载。

javascript异步加载资源的三种方案

1.     defer 异步加载，在script标签上加上这个属性, 它既可以异步加载外部脚本，也就是src引入的，也可以加载内部代码，也就是script内部写的代码，  但它要等到dom文档全部解析完才会被执行，也就是domtree生成后，并且只有IE能用。   
2.     async 异步加载，同样的在script上加上async属性，就可以实现异步加载资源，script标签加载完就执行，async只能加载外部脚本，不能异步加载内部代码 
3.     为了实现兼容，我们一般不像上面那样写，我们可以李荣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>

注意事项:

1.     一般dom节点的删除添加以及它的宽高变化、位置变化等物理变化会导致重新绘制rendertree(reflow), 效率极低，尽量避免少做这些操作，而css变化是重绘，也会影响一些效率、但是不严重
2.     异步操作中，一般先绑定事件，在做其他操作，避免操作完毕不触发事件，例如ajax里面
3.     在异步加载js文件的时候，不能有document.write（） 它会清空整个页面将自己的东西覆盖之前的东西
4.     一般我们如果要等到全部解析完成，我们一般是直接将script写到最下面，但是这不是全部正确的，一般这样写：document.addEventListener('DOMContentLoaded', function () { }, false)，监听这个事件的话可以确保dom已经解析完毕
5. 如果直接在页面中写script标签并且不加async或则defer 那么同样会阻塞页面即同步加载

javascript加载时间线(9步)

1. 创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = 'loading'。
2. 遇到link外部css，创建线程加载，并继续解析文档。
3. 遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。 遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。 对于async属性的脚本，脚本加载完成后立即执行。（异步禁止使用document.write()） 
4. 遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。
5. 当文档解析完成，document.readyState = 'interactive'。
6. 文档解析完成后，所有设置有defer的脚本会按照顺序执行。（注意与async的不同,但同样禁止使用document.write()）;
7. document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
8. 当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = 'complete'，window对象触发load事件。