浏览器的 Event loop

[ChuChencheng]

任务的概念

网上有很多解释，这边只做个记录。

宏任务

例如：

• setTimeout
• setInterval
• setImmediate
• requestAnimationFrame
• I/O
• UI rendering

微任务

例如：

• process.nextTick (Node独有)
• Promise
• Object.observe
• MutationObserver

事件循环流程

简化的描述：

维护两个队列，一个宏任务队列，一个微任务队列 在执行过程中遇到新增的宏任务或微任务，将其加入相应的队列中

1. 执行同步代码
2. 执行微任务队列中的任务，直到微任务队列为空（此步骤新增的微任务在加入队列后也会在这个周期执行）
3. 从宏任务队列中取一个任务执行
4. 重复2、3步骤

拓展

Node.js 中的事件循环

关于标准

Event loops

参考

带你彻底弄懂Event Loop

[ChuChencheng]

关于 UI 渲染阶段与 rAF 执行时机，以及 rAF 是否属于宏任务的问题，参考 https://www.404forest.com/2017/07/18/how-javascript-actually-works-eventloop-and-uirendering/#4-requestAnimationFrame-callback-%E7%9A%84%E6%89%A7%E8%A1%8C%E6%97%B6%E6%9C%BA