event loop

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

1. 执行全局script同步代码
2. 全局script代码执行完毕后，调用栈stack会清空
3. 从微队列microtask queue中取出位于队首的回调任务，放入调用栈stack中执行。
4. 继续取出位于队首的任务执行，知道microtask queue中的所有微任务执行案必
5. microtask queue中的所有任务都执行完毕，此时microtask queue为空队列，调用栈Stack也为空
6. 取出宏队列macrotask queue中位于队首的任务，放入Stack中执行
7. 执行完毕后，调用栈Stack为空
8. 重复第3-7个步骤；
9. ...

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