JS event loop 事件循环

javascript是一门单线程的非阻塞的脚本语言。

javascript引擎就是通过event loop（事件循环）来实现“非阻塞”的。

正文

我们知道，当我们调用一个方法的时候，js会生成一个与这个方法对应的执行环境（context），又叫执行上下文。这个执行环境中存在着这个方法的私有作用域，上层作用域的指向，方法的参数，这个作用域中定义的变量以及这个作用域的this对象。 而当一系列方法被依次调用的时候，因为js是单线程的，同一时间只能执行一个方法，于是这些方法被排队在一个单独的地方。这个地方被称为执行栈。

当一个脚本第一次执行的时候，js引擎会解析这段代码，并将其中的同步代码按照执行顺序加入执行栈中，然后从头开始执行。如果当前执行的是一个方法，那么js会向执行栈中添加这个方法的执行环境，然后进入这个执行环境继续执行其中的代码。当这个执行环境中的代码 执行完毕并返回结果后，js会退出这个执行环境并把这个执行环境销毁，回到上一个方法的执行环境。。这个过程反复进行，直到执行栈中的代码全部执行完毕。

那么当一个异步代码（如发送ajax请求数据）执行后会如何呢？前文提过，js的另一大特点是非阻塞，实现这一点的关键在于下面要说的这项机制——事件队列.

js引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当一个异步事件返回结果后，js会将这个事件加入与当前执行栈不同的另一个队列，我们称之为事件队列。被放入事件队列不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕， 主线程处于闲置状态时，主线程会去查找事件队列是否有任务。如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码...，如此反复，这样就形成了一个无限的循环。这就是这个过程被称为“事件循环（Event Loop）”的原因。

总结一下：

• 同步任务都在主线程上执行，形成一个执行栈
• 主线程之外，还存在一个事件队列。只要异步任务有了运行结果，就在事件队列之中放置一个事件。
• 一旦执行栈中的所有同步任务执行完毕，系统就会读取事件队列,将队列中的事件放到执行栈中依次执行
• 主线程从任务队列中读取事件，这个过程是循环不断的，整个过程就是Event Loop (事件循环)

在事件队列中任务被分为两种：

宏任务

• setTimeout
• setInterval
• ...

微任务

• Promise
• Object.observe
• MutationObserver
• ...

执行顺序

当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件，然后再去宏任务队列中取出一个事件。

同一次事件循环中，微任务永远在宏任务之前执行。

（1）宏任务优先级较低，若当前执行的是微任务，且微任务队列中任然有task，他会将其中的微任务全部执行完成

（2）当没有微任务时，才去执行宏任务中的第一条。一旦宏任务执行完，发现有微任务，将继续执行微任务，遵循（1）

async function async1(){
    console.log('async1 start'); // 2
    await async2();
    console.log('async1 end'); // 6
}
async function async2(){    
    console.log('async2'); // 3
}
console.log('script start') // 1
setTimeout(function(){
    console.log('setTimeout') // 8
})
async1()
new Promise(function(resolve){
    console.log('Promise1') // 4
    resolve()
}).then(function(){
    console.log('Promise2') // 7
})
console.log('script end') // 5

 如上代码所示：把所有的同步任务放到按照顺序添加到执行栈中依次执行，等所有的执行栈任务执行完开始依次执行微任务，所有微任务执行完成之后开始执行宏任务。

再升华一下：

async function async1(){
    console.log('async1 start'); // 2
    new Promise(function(resolve){
        console.log('async1 Promise1') // 3
        setTimeout(function(){
            console.log('async1 setTimeout') // 11
            new Promise(function(resolve){
                console.log('async1 setTimeout Promise1') // 12
                resolve()
            }).then(function(){
                console.log('async1 setTimeout Promise2') // 13
            })
        })
        resolve()
    }).then(function(){
        console.log('async1 Promise2') // 7
    })
    await async2();
    console.log('async1 end'); // 8
}
async function async2(){
    console.log('async2'); // 4
}
console.log('script start') // 1
setTimeout(function(){
    console.log('setTimeout') // 10
})
async1()
setTimeout(function(){
    console.log('setTimeout2') // 14
})
new Promise(function(resolve){
    console.log('Promise1') // 5
    resolve()
}).then(function(){
    console.log('Promise2') // 9
})
console.log('script end') // 6

 如上图执行到第六个6的时候 已经把所有的同步任务做完了，开始找微任务，第7个是微任务到第9个全部微任务已经完成，开始找宏任务，找到宏任务10开始执行，执行到11---async1 setTimeout发现了promise微任务，优先处理微任务到了，等处理完13---async1 setTimeout Promise2之后没有微任务了退出当前执行栈继续执行宏任务