JS异步加载的方式

一.异步加载和同步加载

说起异步加载，我就先说说同步加载
同步加载(同步模式) :又称阻塞模式，会停止浏览器的后续处理，也就是后续的代码解析和页面渲染。

我们的html文件的加载是同步的。css文件也是同步的，当遇到css文件时，主线程会创建子线程加载它，而不会持续使用主线程造成阻塞。

在文档中，只有script标签的src是异步的。其他的，诸如：a标签的href和img标签src等都是同步的。

而我们通常写代码都是在同步模式中，一旦前面有代码出错，后面的代码就会停止运行。

异步加载:又称非阻塞模式，在下载js文件的同时，对后续的代码也进行处理。也就是说，在异步加载模式下，一旦前面的代码出错，后面的代码也不会停止执行。

同步和异步的区别：JavaScript 为单线程，所以同步为单线程，异步为模拟多线程；同步和异步的区别在于在执行程序的顺序不同。

二.异步加载的方式

1.在script标签中设置defer属性

<script src = "xx.js" defer></script>

2.在script标签中设置async属性

<script src = "xx.js" async></script>

3.按需加载

<script>
	function running(callback,url){
		var script = document.creatElement("script");
		if(script.readyState){
			script.onreadychange = function(){
				if(script.readystate == "complete" || script.readystate == "loading"){
					callback();
				}
			}
		}else{
			window.loaded = function(){
				callback();
			}
		}
		script.src= url;
		document.head.appendChild(script);
	}
	running(function(){xx()},xx.js)

4.defer与async的差异性
所有设置了defer的script脚本会等到整个页面正常渲染结束，才执行；
async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。即哪个先下载完成哪个先执行。
一句话，defer是“渲染完再执行”，async是“下载完就执行”。
如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。
defer是ie专属，既可以加载内部js也可以加载外部js文件
async只能加载外部js文件时