js异步加载的三种方式

一.同步加载

默认正常模式下，JS是同步加载的，及优先加载JS，只有当JS文件下载完，dom和css才开始加载

同步加载是我们使用最多的一种方式，同步模式，又称为阻塞模式，会阻止浏览器的后续处理，停止后续的解析，要等js加载完并执行之后才能执行下一步，所以默认同步执行是最安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把

缺点：过多js加载会影响页面效率，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。

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

二.异步加载

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

1、defer，异步加载，但要等dom文档全部解析完（dom树生成）才会被执行。只有IE能用;

defer属性：IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。

defer属性的值只有defer一个，即 defer = ‘defer’，可直接写defer

注：所有的defer脚本必须保证按顺序执行的。

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

2.async,异步加载，HTML5新属性。

加载完就执行;async只能加载外部脚本，不能把js写在script标签里。ie9以上可以用，作用同defer，但是不能保证脚本按顺序执行

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

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);
}

这样所有的js脚本都会在onload事件后才加载，onload事件会在所有文件内容（包括文本、图片、CSS文件等）加载完成后才开始执行，极大的优化了网页的加载速度，提高了用户体验