浏览器事件循环中微任务与渲染时机:从requestAnimationFrame说起
页面滚动时用 requestAnimationFrame 做动画,常会遇到“明明改了样式但下一帧没生效”或者“微任务里的 DOM 操作被推迟到下一帧”的怪事。这类问题大多跟浏览器事件循环里微任务、渲染步骤和 rAF 回调的先后顺序有关。事件循环每轮会先执行一个宏任务(比如 setTimeout、UI 事件),然后清空微任务队列(Promise.then、MutationObserver),接着才进入渲染阶段:先执行 requestAnimationFrame 回调,再执行样式计算、布局、绘制。如果微任务里又产生了新的微任务,会一直执行到队列为空,这会阻塞渲染。理解这些顺序,才能解释为什么在 P...