UI渲染发生在宏任务执行完毕且微任务队列清空后，浏览器检查DOM变更与帧时间条件满足时自动触发；它不是JS主动调用的任务，而是渲染引擎在事件循环间隙自主执行的隐式行为。
UI 渲染不是 JavaScript 主动“触发”的，而是浏览器在事件循环的特定空闲阶段自动完成的。它和 EventLoop 不是并列关系，而是被调度关系：渲染本身是浏览器渲染引擎的行为，发生在宏任务结束、微任务清空之后，且需满足 DOM 变更可感知、帧时间未超限等前提。
UI 渲染发生在事件循环的哪个环节
现代浏览器（Chrome/Firefox/Safari）的典型执行节奏是：
- 执行一个宏任务（如
setTimeout回调、点击事件处理函数、初始脚本） - 立即清空全部微任务（
Promise.then、queueMicrotask、MutationObserver） - 此时若 DOM 状态有变化（比如修改了
style.color或插入了新节点），且当前帧尚未超时（≈16.7ms），浏览器会安排一次 UI 渲染 - 渲染完成后，才开始下一轮事件循环，取下一个宏任务
为什么 DOM 修改后界面不立刻更新
因为 JS 执行和 UI 渲染由不同线程负责，且互斥：
- JS 引擎线程运行时，GUI 渲染线程被挂起
- 所有同步代码 + 微任务必须执行完，主线程才算“空闲”
- 只有这时，浏览器才把暂存的样式计算、布局、绘制、合成等步骤提交并上屏
- 所以连续写入多个 DOM 操作，只会触发一次最终渲染，而非每次写都重绘
如何可靠地监听或等待渲染完成
不要用 setTimeout(0) 或轮询，推荐标准方式：
立即学习“Java免费学习笔记（深入）”；
-
requestAnimationFrame：回调在下一帧绘制前执行，最适合动画起步、读取布局尺寸（如offsetHeight） -
ResizeObserver：监听元素尺寸变化，比反复查getBoundingClientRect更高效 -
MutationObserver：监听 DOM 结构变更，适合响应式内容插入后的逻辑 - 避免强制同步渲染：比如先读
scrollHeight再改style.height，会打断正常流程，引发 layout thrashing
常见误区与优化提示
几个关键事实需要厘清：
- UI 渲染不是宏任务，也不是微任务，它是浏览器自主决定的“隐式任务”，没有显式队列
-
Promise.then总是在渲染前执行，哪怕你刚改完 DOM —— 它属于微任务，优先级高于渲染 - 耗时 JS（如长循环、复杂计算）会阻塞整个主线程，导致多帧跳过，用户看到“卡顿”
- 批量 DOM 操作应使用
documentFragment或临时设display: none，减少重排次数
