事件循环机制整体流程是什么

JavaScript代码的执行过程中，除了依靠函数调用栈来搞定函数的执行顺序外，还依靠任务队列(task queue)来搞定另外一些代码的执行。整个执行过程，我们称为事件循环过程。一个线程中，事件循环是唯一的，但是任务队列可以拥有多个。任务队列又分为macro-task（宏任务）与micro-task（微任务），在最新标准中，它们被分别称为task与jobs。

macro-task

1. script(整体代码)
2. setTimeout
3. setInterval
4. setImmediate
5. I/O
6. UI render

micro-task

1. process.nextTick
2. Promise
3. Async/Await(实际就是promise)
4. MutationObserver(html5新特性)

执行机制

执行宏任务，然后执行该宏任务产生的微任务，若微任务在执行过程中产生了新的微任务，则继续执行微任务，微任务执行完毕后，再回到宏任务中进行下一轮循环

例子

console.log('script start')//h1 1

async function async1() {
await async2()
console.log('async1 end')//w1--6
}
async function async2() {
console.log('async2 end')//2
}
async1()
console.log(111)//3
setTimeout(function() {
console.log('setTimeout')//h2--9
}, 0)

new Promise(resolve => {
console.log('Promise')//4
resolve()
})
.then(function() {
console.log('promise1')//w2--7
})
.then(function() {
console.log('promise2')//w3--8
})

console.log('script end')//5

开始执行宏任务输出h1-1,执行async1输出2,将微任务w1放入队列，输出3，将宏任务h2放入队列，输出4，输出5至此第一个宏任务结束，开始查找微任务队列，输出w1-6,w2-7,w3-8,没有微任务了输出宏任务h2-9