JavaScript 执行机制（1/33）

参考文章：
· 这一次，彻底弄懂 JavaScript 执行机制
· 详解JavaScript中的Event Loop（事件循环）机制

看完全文算是有一个比较全面的了解了，有一点拎出来说一下：当前正在执行的宏任务+此时微任务队列中的所有微任务 可以被认为是一个Event loop。所有异步事件在被触发的时候会将此异步任务装进宏任务队列中去。当主线程执行完了一轮loop后会从宏任务队列中取出一个任务执行，接着执行微任务队列中的所有任务，至此一轮循环结束，如此反复。
（微任务回调中的微任务依然在本轮loop执行）

按照这个流程，下面这段代码的结果应该很好预测：

console.log(1)
setTimeout(()=>{
    console.log(2)
    setTimeout(()=>{
        console.log(3)
    })
})
Promise.resolve().then(()=>{
    console.log(4)
})
console.log(5)
setTimeout(()=>{
    console.log(6)
})
//1 5 4 2 6 3

第一轮loop结束后的
宏任务队列：

1. console.log(2)
2. setTimeout(...)
3. console.log(6)

当拿出队列中的第二个任务的时候，因为延迟为0，所以直接将任务取出放入队列尾，此时宏任务队列：

1. console.log(6)
2. console.log(3)

分析进程的时候可以画出如下表格：

image.png
其中包括了宏任务队列，微任务队列，调用堆栈，控制台输出四个部分。从 run script 开始直到所有队列及堆栈为空。

宏任务一般是：整体代码 script，setTimeout，setInterval。
微任务：Promise，process.nextTick。