异步加载javascript

浏览器时间线

浏览器内核内部是不认识代码的，它会对页面进行一步步的检索，首先先一行行解释识别html代码中的节点绘制domTree（dom节点的树形结构），该树遵循深度优先原则，在dom节点的解析时只需要判断节点类型，并不需要加载完，这是个异步过程（同时过程），识别css代码时也一样会生成cssTree，然后合并成randerTree渲染树，渲染引擎开始绘制页面，在绘制中，javascript可以改变dom节点的内容或者offsetWidth/Height（因为要重排保证数据实时性），就会引发一系列连锁重构reflow重排randerTree，所以我们在做修改dom的操作时尽量一次性修改完成，尽量少的浪费效率，repaint重绘（如修改div颜色就会触发）：部分重排，不会浪费太多资源

渲染引擎

在解析完渲染树后，以一个像素为高一行行地渲染

异步加载javascript

js的加载会阻断html，css的加载线（因为：他们不能并行，js可以修改html）

有些js不是用于修改页面，尽量希望他能异步加载

js加载的缺点：加载工具方法没必要阻塞文档，过多js加载会影响页面的效率，一旦网速不好，整个网站将等待js加载而无法进行后续的渲染等工作

有些工具方法需要按需加载，用到再加载，不用不加载

异步加载javascript的三种方案
1.defer 异步加载，但要等到dom文档(整个页面解析完，dom树解析完)全部解析完成才会被执行，只有IE能用，也可以将代码写到内部（执行时不阻塞页面）可以把js写在script标签里。

<script type="text/javascript" src="tools.js" defer="defer"></script>

2.async 异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script标签里。（执行时不阻塞页面）W3C标准，IE9以上可用

<script type="text/javascript" src="tools.js" aysnc="aysnc"></script>

3.创建script，插入到DOM中，加载完毕后callback

<script type="text/javascript">
	var script = document.createElement('script');
	script.type = "text/javascript";
	

	//IE方法用状态码，加载中时未loading
	if(script.readystate){
		script.onreadystatechange = function () {
		if(script.readystate == "complete" || script.readystate == "loaded"){
		}
	}
}else{
			script.onload = function () {
	//这里面的代码就可以保证在加载完资源后再执行，保证不会出现代码执行时资源来不及加载，该方法IE不兼容
	}
		}
		script.src = "tools.js";//加载，加载时间可能会大于程序执行时间（微妙单位）避免网速太快无法状态码改变触发事件所以放到事件绑定代码后
	document.head.appendChild(script);//插入执行
</script>

封装函数

<script type="text/javascript">
function loadScript(url, callback) {
		var script = document.createElement('script');
			script.type = "text/javascript";
			script.src = url;//加载，加载时间可能会大于程序执行时间（微妙单位）
		
		
			//IE方法用状态码，加载中时未loading
			if(script.readystate){
				script.onreadystatechange = function () {
				if(script.readystate == "complete" || script.readystate == "loaded"){
				callback();
				}
			}
		}else{
					script.onload = function () {
					callback();
			//这里面的代码就可以保证在加载完资源后再执行，保证不会出现代码执行时资源来不及加载，该方法IE不兼容
			}
				}
			document.head.appendChild(script);//插入执行
}

loadScript("tools.js",function (){
						test();
});//这里的匿名函数是因为如果直接赋值test()无法识别出而返回undefined，包在函数体内能等到代码就绪执行时再识别test()
</script>