详解JS异步加载的三种方式

一：同步加载

我们平时使用最多的一种方式
缺点：过多js加载会影响页面效率，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。
默认正常模式下，JS是同步加载的，及优先加载JS，只有当JS文件下载完，dom和css才开始加载

<script src = 'demo.js'></script>

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，等待js加载完成并执行该脚本，才能进入下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面阻塞。所以一般建议把script标签放在body标签结尾处，这样尽可能减少页面阻塞。

二：异步加载

异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。

1.defer 只支持IE
JS异步加载，dom结构解析完才异步执行
内部js也能用该属性
异步加载js不允许使用document.write，因为document.write会清除文档流

<script src='demo.js' defer></script>

2.async h5属性
JS异步加载，加载完毕后立刻异步执行
IE8及以下不兼容
内部JS不能用该属性

<script src='demo.js' async></script>

• async:属性仅适用于外部脚本（只有使用src属性时）

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

function loadScript(url,callback){//URL为js的链接，callBack为URL的js中的函数
	var script = document.createElement('script');
	script.type = 'text/javascript';
	//script.readyState存在好几种状态
	if(script.readyState){//兼容IE
		script.onreadystatechange = function(){//只有状态改变才会触发
			if(script.readyState == 'loaded' || script.readyState == 'complete'){
				script.onreadystatechange = null;
				callback();
			}	
		}
	}else{
		script.onload = function(){
			callback();
		}
	}
	script.scr = url;
	document.body.appendChild(script);
}