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

详解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文件等）加载完成后才开始执行，极大的优化了网页的加载速度，提高了用户体验

三.延迟加载

有些JS代码在某些情况在需要使用，并不是页面初始化的时候就要用到。延迟加载就是为了解决这个问题 。将JS切分成许多模块，页面初始化时只加载需要立即执行的JS，然后其它JS的加载延迟到第一次需要用到的时候再加载。类似图片的延迟加载。

JS的加载分为两个部分：下载和执行。异步加载只是解决了下载的问题，但是代码在下载完成后就会立即执行，在执行过程中浏览器处于阻塞状态，响应不了任何需求。

解决思路：为了解决JS延迟加载的问题，可以利用异步加载缓存起来，但不立即执行，需要的时候在执行。如何进行缓存呢？将JS内容作为Image或者Object对象加载缓存起来，所以不会立即执行，然后在第一次需要的时候在执行。