event loop
2020-08-20 本文已影响0人
两朵小黑云
How
Event loop 即事件循环，是一个执行模式，浏览器和NodeJS基于不同的技术实现了各自的Event Loop。
宏队列 和 微队列
宏队列 宏任务 macro 也叫 task 一些异步任务的回调会依次进入 macro task queue，等待后续被调用，这些异步任务包括：
- setTimeout
- setInterval
- setImmediate (Node独有)
- requestAnimationFrame (浏览器独有)
- I/O
- UI rendering (浏览器独有)
微队列 微任务 microtask 也叫 job 另一些异步任务的回调会依次进入 micro task queue，\ 等待后续被调用，这些异步任务包括：
- Promise
- process.nextTick(Node)
- Object.observe
- MutationObserver
浏览器的 Event loop
来一张被传烂了图 来自 Philip Roberts的演讲《Help, I'm stuck in an event-loop》
image.png
- 执行全局script同步代码
- 全局script代码执行完毕后，调用栈stack会清空
- 从微队列microtask queue中取出位于队首的回调任务，放入调用栈stack中执行。
- 继续取出位于队首的任务执行，知道microtask queue中的所有微任务执行案必
- microtask queue中的所有任务都执行完毕，此时microtask queue为空队列，调用栈Stack也为空
- 取出宏队列macrotask queue中位于队首的任务，放入Stack中执行
- 执行完毕后，调用栈Stack为空
- 重复第3-7个步骤；
- ...
ok？ 你又觉得你行了？ 不服来战！
// 说出一下代码执行顺序
console.log(1);
setTimeout(() => {
console.log(2);
Promise.resolve().then(() => {
console.log(3)
});
});
new Promise((resolve, reject) => {
console.log(4)
resolve(5)
}).then((data) => {
console.log(data);
})
setTimeout(() => {
console.log(6);
})
console.log(7);
// 1 4 7 5 2 3 6
