任务（事件）队列和事件循环

Posted 2022-04-02 web半晨

目录

• 1、任务（事件）队列
• • 1.1、宏仁务（macro tasks）
  • 1.2、微任务（micro tasks）
• 2、事件循环

---

1、任务（事件）队列

JavaScript中有两类任务（事件）队列：宏任务队列（macro tasks）和微任务队列（micro tasks）。宏任务队列可以有多个，微任务队列只有一个。

---

1.1、宏仁务（macro tasks）

1. setTimeout
2. setInterval
3. script
4. I/O
5. UI 交互事件
6. postMessage
7. MessageChannel
8. setImmediate（Nodejs环境）

---

1.2、微任务（micro tasks）

1. Promise.then
2. Object.observe
3. MutaionObserve
4. process.nextTick（Node.js环境）

---

2、事件循环

事件循环（Event Loop）遵循的是html5的标准。当执行栈（stack）为空的时候，就会从任务队列中，取任务来执行。共3步：
1、取一个宏任务来执行。执行完毕后，下一步。
2、取一个微任务来执行，执行完毕后，再取一个微任务来执行。直到微任务队列为空，执行下一步。
3、更新UI渲染。
事件循环（Event Loop）会无限循环执行上面的3步，这就是事件循环（Event Loop）的主要控制逻辑。其中，第3步（更新UI渲染）会根据浏览器的逻辑，决定要不要马上执行更新。毕竟更新UI成本大，所以，一般都会比较长的时间间隔，执行一次更新。