UI渲染由浏览器在事件循环空闲时自动触发，发生在宏任务结束、微任务清空后，且需满足DOM变化、帧时间未超限等条件；requestAnimationFrame是最可靠的下一帧钩子。
UI 渲染在 JavaScript 事件循环中不是由代码显式触发的，而是浏览器在每次事件循环的空闲阶段自动执行的，前提是当前任务队列清空、没有更高优先级任务（如输入响应、动画帧）阻塞，且 DOM 状态发生了可感知的变化。
渲染发生在宏任务之间，但受浏览器调度策略约束
现代浏览器（Chrome、Firefox、Safari）通常在一次事件循环结束、即将进入下一轮之前检查是否需要更新界面。这个时机大致位于：
- 当前宏任务（如 setTimeout 回调、事件处理函数）执行完毕
- 所有微任务（Promise.then、queueMicrotask）已清空
- 浏览器确认有未提交的样式变更或布局变化（如修改了 offsetHeight、getComputedStyle 触发强制重排，或设置了 element.style.color 等影响绘制的属性）
- 且当前帧尚未超时（通常控制在 16.7ms 内以维持 60fps）
requestAnimationFrame 是最可靠的“下一帧”钩子
如果你需要在 UI 渲染前或后执行逻辑，requestAnimationFrame (rAF) 是标准且兼容性最好的方式：
- rAF 回调会在浏览器下一次重绘前被调用（通常在下一帧开始时）
- 它比 setTimeout(0) 更精准，避免因 JS 执行延迟导致跳帧
- 连续多次调用 rAF 会自动合并为单次回调（浏览器优化）
- 示例：修改样式后，用 rAF 等待渲染完成再读取布局信息
强制同步渲染（应避免，仅调试用）
某些操作会触发强制同步重排/重绘（layout thrashing），例如：
立即学习“Java免费学习笔记（深入）”；
- 读取 offsetTop、scrollHeight、getBoundingClientRect() 等布局相关属性
- 紧接着又写入样式（如 element.style.width = '200px'）
- 此时浏览器可能立即计算样式并渲染，打断正常事件循环节奏
- 这种行为性能差、不可预测，生产环境应避免交替读写 DOM
实际开发中如何把握渲染时机
多数情况下无需手动干预渲染时机，但需注意：
- 批量 DOM 修改优于逐次修改（减少重排次数）
- 使用 documentFragment 或 display: none 元素做离线操作
- 动画优先用 CSS transitions / transforms，它们由合成器线程处理，不阻塞主线程
- 若需监听渲染完成（如测量元素尺寸），用 rAF + 递归检测或 ResizeObserver/MutationObserver 替代轮询
