事件循环是高性能渲染的调度中枢，通过宏任务、微任务和requestanimationframe协同调度渲染时机，避免js阻塞导致掉帧。

事件循环不是旁观者，而是高性能渲染的调度中枢。它不直接画像素，但决定什么时候让渲染管线启动、什么时候让JS让出主线程、什么时候把动画帧塞进最合适的时机。

渲染流程被事件循环“切片”调度

现代网页的高性能渲染，本质是把一整块重任务拆成小块，穿插在事件循环的间隙里执行。浏览器不会等你JS全跑完才渲染，而是在每个宏任务结束后检查：DOM变了没？样式动了没？离上一帧超16ms没？满足任一条件就立刻触发样式→布局→绘制→合成。

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

• 一次点击事件（宏任务）触发状态更新后，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

• 用 setTimeout(..., 0) 把大数组处理分片，每片处理完就让出线程，给渲染和用户输入留空隙
• 用 queueMicrotask 替代多层 Promise.then，减少微任务嵌套深度，避免阻塞后续渲染检查点
• 对 CPU 密集型逻辑（如图像处理、JSON 解析），直接移入 Web Worker，彻底剥离主线程负担

后台与节流是浏览器的“自动优化”

事件循环的行为会随页面状态动态调整，开发者需顺势而为：

• 标签页切到后台时，requestAnimationFrame 和 setTimeout 频率大幅降低（如降到每秒1次），此时不应依赖 rAF 做定时逻辑
• 滚动过程中，浏览器可能丢弃中间帧，只保留最新 scroll 位置；用 passive: true 注册 scroll 事件可避免阻止默认行为，提升吞吐
• 当一帧渲染耗时 > 16ms，后续帧会被跳过（jank），这时与其强行补帧，不如降级动画效果或暂停非关键更新

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南