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

方法一：也叫Script DOM Element

方法二：onload时的异步加载

方法三：其他方法：由于JavaScript的动态性，还有很多异步加载方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer属性、 [removed](script tag)。

1. 利用回调函数

2. 利用promise配合async和await
   

1.Generator函数 状态机 （生成器）

概念： Generator 的中文名称是生成器，它是 ECMAScript6 中提供的新特性。 Generator 函数是 ES6 提供的一种异步编程解决方案，在过去，封装一段 运算逻辑的单元是函数。函数只存在“没有被调用”或者“被调用”的情况，不存 在一个函数被执行之后还能暂停的情况，而 Generator 的出现让这种情况成 为可能,我们可以把 Generator 函数理解成状态机，封装了多个内部状态。 

语法：

1. function 后面需要加 *

 eg:

function* generator()

 2. 函数内需要使用 yield 表达式来描述状态

调用：

我们调用了 generator 函数之后，会返回一个 iterator 对 象，随后需要调用 next 方法， 才会看到结果, next 方法遇到 yield 就 会暂停，需要再次调用。

yield关键字：

1. 真正让Generator具有价值的是yield关键字，这个yield关键字让 Generator内部的逻辑能够切割成多个部分。 

2. yield 表达式后面的状态，会在 next 方法返回的对象中的 value 上出 现

3. yield 表达式本身是没有值的，如果想要让表达式有值的话，我们可以 向 next 方法传参,通过 .next() 传递参数，可以赋值给 yield 关键字前 面的变量声明。 

4. next 方法传参时是针对上一个 yield 生效的

eg:

 let compute = function* (a, b) {

 var foo = yield a + b;

 console.log(foo);

 };

let generator = compute(4, 2);

generator.next(); // {value: 6, done: false} 

generator.next("Hello world!"); //Hello world! {val ue: undefined, done: true}

拓展：同步异步问题 1. 同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完 毕，才能执行后一个任务； 2. 异步任务指的是，不进入主线程、而进入”任务队列”的任务，只有等主 线程任务执行完毕，”任务队列”开始通知主线程，请求执行任务，该任 务才会进入主线程执行。 

2.Promise

概念： 

promise 也是 es6 提供的一种异步编程的解决方案,语法和使用场景要比 generator 优秀。

使用方式:

1. 是一个构造函数 ， 所以要 new Promise() 2. 需要使用 then 方法来接受成功或失败的结果

 eg：

var promise = new Promise((resolve, reject)=>{})

promise .then( ()=> {}"),()=>{});

特点

对象的状态不受外界影响 （3种状态） Pending 状态（初始状态） Fulfilled 状态（成功状态） Rejected 状态（失败状态）

一旦状态改变就不会再变,且不可逆 （两种状态改变：成功或失败） Pending -> Fulfilled Pending -> Rejected 

promise 具有一个 then 方法，这个方法的功能是用来接受成功和失败的结 果

1. Promise 对象状态改为 Resolved 时调用 （必选）

 2. Promise 对象状态改为 Rejected 时调用 （可选）

语法

promise.then(成功 , 失败) 

eg：promise.then((res)=>{ console.log(res) },(err)=>{ console.log(err); })

 可以优化一下then方法：

 promise.then(成功).catch(失败) 

eg: let p=new Promise((resolve,reject)=>{

 setTimeout(()=>{

 resolve('成功'); // reject('失败'); },100); })

p.then((res)=>{ 

console.log(res) //成功 })

.catch((err)=>{

 console.log(err); 

})

1.defer:defer
　　JS异步下载，dom结构解析完（标签 + 样式（内容不一定下载完））才执行 （执行会阻塞dom渲染）
　　仅IE能用
　　内部JS也能用该属性
　　异步加载js不允许使用[removed]，因为[removed]会清除文档流，js标签还未加载就会被清除
　　[removed]()可用于初始化页面
2.(h5)async:async（asynchronous） ajax(asynchronous javascript and XML)
　　JS异步加载，加载完毕后立刻执行（执行阻塞dom渲染）
　　IE8及以下不兼容
　　内部JS不能用该属性

3.除了以上两种方法，还有一种兼容自己封装的异步加载方式，即动态添加script标签也能实现异步加载。