事件循环概述
一句话结论:事件循环负责在“调用栈空闲时”从队列中取回调执行,并在合适的时机触发渲染;理解“宏任务/微任务/渲染时机”就能解释大多数执行顺序问题。
1. 你可以用这张心智模型理解
- 同步代码:立即入栈执行(占用调用栈)
- 宏任务(task):
setTimeout、MessageChannel、I/O、事件回调等 - 微任务(microtask):
Promise.then、queueMicrotask、MutationObserver等 - 渲染:浏览器会在合适的时机(通常在一轮任务之后)进行样式/布局/绘制
2. 一轮(tick)里大致发生什么
- 取出并执行一个宏任务(会跑一段同步代码)
- 执行并清空微任务队列(直到队列为空)
- 需要的话进行渲染(不是每轮都必须渲染)
- 开始下一轮
3. 为什么微任务“更快”
- 微任务在本轮宏任务结束后立刻清空,优先级高于下一轮宏任务
- 这既能做“收尾”(Promise 链),也可能导致“饿死渲染”(不停追加微任务)