如何回答事件循环机制？

如何回答事件循环机制？

1、先说基本知识点，宏任务与微任务都有哪些？

2、说事件循环机制的过程，边说边画，

3、说async/await执行顺序，可以把chrome的优化，做法其实是违反了规范的，V8团队的PR这些也自信点说出来，显得好学。

4、把node 的事件循环也说一下。重复1、2、3点，node的第三点要说的是node11前后的事件循环变动点。

js执行机制（也叫事件轮询）

浏览器中的事件循环

Js是单线程语言，同一个时间只能做一件事情，需要函数调用栈和任务队列任务队列来来搞定代码的执行顺序。任务队列分为宏任务与微任务

同步任务：在主线程上被执行的任务

异步任务：没有进入主线程，而进入任务表（task table），达到条件之后会进入任务队列(task queue)，主线程空了才会看任务队列当中有没有任务要执行，这时，异步任务才会进入主线程被执行。

宏任务大概包括：script(整体代码)、setTimeout、setInterval、setImmediate、I/O、UI render

微任务包括：pomise、async/await、process.nextTick、MutationObserver

事件循环机制

就是，先判断是同步任务还是异步任务，同步任务就在主线程上，异步任务就进入任务表。先执行主线程上的同步任务，主线程的同步任务执行完之后，主线程再执行任务队列里面的微任务，若微任务在执行过程中产生了新的微任务，则继续执行微任务，微任务执行完毕后，再回到宏任务中进行下一轮循环。

注意

async/await的执行顺序在谷歌浏览器的执行顺序会不一样，谷歌的await的微任务会变得更快。

在谷歌浏览器中分两种情况

1、中如果await 后面直接跟的为一个变量，比如：await 1；这种情况的话相当于直接把await后面的代码注册为一个微任务，可以简单理解为promise.then(await下面的代码)。然后跳出async1函数，执行其他代码，当遇到promise函数的时候，会注册promise.then()函数到微任务队列，注意此时微任务队列里面已经存在await后面的微任务。所以这种情况会先执行await后面的代码（async1 end），再执行async1函数后面注册的微任务代码(promise1,promise2)。

2、如果await后面跟的是一个异步函数的调用此时执行完awit并不先把await后面的代码注册到微任务队列中去，而是执行完await之后，直接跳出async1函数，执行其他代码。然后遇到promise的时候，把promise.then注册为微任务。其他代码执行完毕后，需要回到async1函数去执行剩下的代码，然后把await后面的代码注册到微任务队列当中，注意此时微任务队列中是有之前注册的微任务的。所以这种情况会先执行async1函数之外的微任务(promise1,promise2)，然后才执行async1内注册的微任务(async1 end). 可以理解为，这种情况下，await 后面的代码会在本轮循环的最后被执行.

经典题：

console.log('script start')

async function async1() {
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2 end')
}
async1()

setTimeout(function() {
console.log('setTimeout')
}, 0)

new Promise(resolve => {
console.log('Promise')
resolve()
})
.then(function() {
console.log('promise1')
})
.then(function() {
console.log('promise2')
})

console.log('script end')
 // 旧版输出如下，但是请继续看完本文下面的注意那里，新版有改动
// script start => async2 end => Promise => script end => promise1 => promise2 => async1 end => setTimeout



//新版输出如下：

// script start => async2 end => Promise => script end => async1 end => promise1 => promise2 => setTimeout