事件循环不直接渲染，但通过调度保障rAF按时执行；应避免主线程阻塞，用rAF对齐刷新率，结合微任务协调状态，并用DevTools监控帧率。
JavaScript 事件循环本身不直接“实现”图形渲染，但它为非阻塞渲染提供了底层调度机制——关键在于把渲染逻辑交给浏览器的渲染管线（如 requestAnimationFrame），并避免在主线程上执行耗时计算或同步 I/O，从而让事件循环保持通畅，确保动画帧按时触发、绘制不掉帧。
用 requestAnimationFrame 对齐浏览器刷新节奏
requestAnimationFrame（简称 rAF）不是事件循环的一部分，而是浏览器提供的与屏幕刷新率（通常 60Hz）同步的回调调度机制。它被安排在“渲染前”的时机执行，优先级高于 setTimeout 和微任务，且自动节流（页面不可见时暂停）。
正确用法示例：
function render() {
// 更新状态（如位置、旋转）
update();
// 绘制到 canvas 或更新 DOM
draw();
// 请求下一帧
requestAnimationFrame(render);
}
requestAnimationFrame(render); // 启动
✅ 优势：浏览器可优化调度，避免强制同步布局/重绘；自动适配不同设备刷新率；比 setInterval 更精准、更节能。
立即学习“Java免费学习笔记（深入）”；
避免主线程阻塞，保障 rAF 按时执行
rAF 回调能否准时运行，取决于事件循环是否“空闲”。如果主线程正忙于长任务（如复杂计算、大数组遍历、同步 JSON 解析），rAF 回调就会延迟甚至跳帧。
缓解策略：
-
拆分长任务：用
setTimeout或queueMicrotask将大计算切片，在空闲帧间断续执行，给 rAF 让出时间； -
移出主线程：将密集型计算（物理模拟、图像处理）放到 Web Worker 中，通过
postMessage传递结果； -
避免强制同步布局（Layout Thrashing）：不要在单次 rAF 中反复读写 DOM 几何属性（如
offsetTop+style.left），批量读、批量写； -
谨慎使用
await在渲染循环中：避免await长等待（如未 resolve 的 Promise），否则会阻塞后续 rAF 调用。
结合微任务与宏任务做异步状态协调
当渲染需响应用户交互（如点击拖拽）、网络数据（如加载贴图）或定时逻辑（如动画关键帧）时，可利用事件循环的阶段特性做解耦：
- 用户事件（click、pointermove）触发后，立即更新状态，但不在事件处理器里绘制——只标记“需重绘”，由下一次 rAF 统一执行；
- 异步加载资源（如
fetch图片）完成后，用Promise.then（微任务）更新纹理缓存，再在 rAF 中检查是否就绪并启用； - 动画状态机切换（如从 idle → running）可在微任务中完成初始化，确保 rAF 开始时状态已一致。
这样既保持响应性，又避免在错误时机触发绘制，也防止重复渲染。
监控与调试：确认是否真“非阻塞”
仅靠写对 API 不代表无阻塞。可用以下方式验证：
- Chrome DevTools → Performance 面板录制动画过程，观察
Animation Frame Fired是否稳定在 ~16.7ms 间隔，有无长任务打断； - 用
performance.now()在 rAF 开头记录时间，计算实际帧间隔，识别卡顿点； - 开启 Rendering > FPS Meter，实时看帧率和渲染耗时；
- 对关键路径添加
console.time，定位耗时函数，再决定是否切片或移入 Worker。
不复杂但容易忽略。
