事件循环是高性能渲染的调度中枢，通过宏任务、微任务和requestAnimationFrame协同调度渲染时机，避免JS阻塞导致掉帧。
事件循环不是旁观者，而是高性能渲染的调度中枢。它不直接画像素，但决定什么时候让渲染管线启动、什么时候让JS让出主线程、什么时候把动画帧塞进最合适的时机。
渲染流程被事件循环“切片”调度
现代网页的高性能渲染，本质是把一整块重任务拆成小块，穿插在事件循环的间隙里执行。浏览器不会等你JS全跑完才渲染，而是在每个宏任务结束后检查：DOM变了没？样式动了没？离上一帧超16ms没？满足任一条件就立刻触发样式→布局→绘制→合成。
- 一次点击事件（宏任务）触发状态更新后，React/Vue会批量修改DOM，但真正渲染要等到微任务清空之后
- requestAnimationFrame 回调被浏览器安排在“下一帧渲染前”，比 setTimeout 更靠近屏幕刷新节奏
- 连续快速触发的 scroll 或 input 事件，浏览器可能合并或节流，避免微任务和宏任务堆满队列
微任务不是“快”，而是“抢时间”
Promise.then、MutationObserver 等微任务优先级最高，会在每个宏任务结束立即执行。这很适合做状态聚合、响应式依赖收集，但滥用会导致渲染被挤占——比如在一次用户交互中连续 resolve 十几个 Promise，微任务队列拉长，渲染就被推迟。
- Vue 的 nextTick 默认用 Promise.then 实现，确保 DOM 更新后回调执行；但在 Safari 旧版或某些嵌套场景下会退化为 setTimeout，就是为避开微任务过载风险
- MutationObserver 适合监听 DOM 变更并做轻量同步处理，但它本身也是微任务，不宜在其中触发大量计算或强制布局
长任务必须主动让出控制权
任何超过5ms的同步JS都会提高掉帧概率。高性能应用从不写 for (let i = 0; i
立即学习“Java免费学习笔记（深入）”；
- 用 setTimeout(..., 0) 把大数组处理分片，每片处理完就让出线程，给渲染和用户输入留空隙
- 用 queueMicrotask 替代多层 Promise.then，减少微任务嵌套深度，避免阻塞后续渲染检查点
- 对 CPU 密集型逻辑（如图像处理、JSON 解析），直接移入 Web Worker，彻底剥离主线程负担
后台与节流是浏览器的“自动优化”
事件循环的行为会随页面状态动态调整，开发者需顺势而为：
- 标签页切到后台时，requestAnimationFrame 和 setTimeout 频率大幅降低（如降到每秒1次），此时不应依赖 rAF 做定时逻辑
- 滚动过程中，浏览器可能丢弃中间帧，只保留最新 scroll 位置；用 passive: true 注册 scroll 事件可避免阻止默认行为，提升吞吐
- 当一帧渲染耗时 > 16ms，后续帧会被跳过（jank），这时与其强行补帧，不如降级动画效果或暂停非关键更新
