js 异步加载 封装异步加载js函数

js加载的缺点

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

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

js异步加载

三种方案

defer

要等dom文档全部解析完才会被执行，IE独有，也可以把代码写在内部

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

<script type="text/javascript" defer="defer">
	console.log('deffer')
</script>

async

加载完就执行，async 只能加载外部脚本，不可以把代码写在script内，IE9以下不兼容

<script type="text/javascript" src="./index.js" async="async"></script>

动态创建script

动态创建script，插入到DOM中，加载完后callback

var script = document.createElement('srcript');
script.type = "text/javascript";
script.src = "index.js";// 开始加载js文件 不执行

// script.onload = function(){ // js加载完触发  不兼容IE
//   //调用index的方法
// }
// IE
//script.onreadestatechange = function(){
//	if(script.readyState == "loaded" && script.readyState == //"complete"){
//		//调用index的方法
//	}
//}
//document.head.appengChild(script);//开始执行

// 兼容写法
if(script.readyState){
	script.onreadestateshange = function(){
	 	if(script.readyState == "loaded" || script.readyState ==  "complete"){
	 		//调用index的方法
	 	}
 	}
}else{
	script.onload = function(){ 
 	 	//调用index的方法
    }
}
document.head.appengChild(script);//开始执行

封装异步加载js函数

function loadScript(url,callback){
	var script = document.createElement('srcript');
	script.type = "text/javascript";
	
	if(script.readyState){ //IE
		script.onreadestatechange = function(){
		 	if(script.readyState == "loaded" || script.readyState ==  "complete"){
		 		callback()
		 	}
		 }
	}else{
		script.onload = function(){ 
	 	 	callback()
	    }
	}
	script.src = url; //放这里 防止事件还没绑定 url加载完了 就不会执行 callback
	document.head.appengChild(script);//开始执行
}
loadScript('./index.js',function(){
	test()
})

// 或 
// loadScript('./index.js','test()'); //eval(callback);//不建议用

// 或
// index.js
// obj = {
//	 test: function(){}
// }
// loadScript('./index.js','test'); //obj[callback]()