浏览器渲染流水线：构建 DOMCSSOM、回流与重绘的触发

[问答题]

浏览器渲染流水线：构建 DOM/CSSOM、回流与重绘的触发与优化。

查看答案及解析

DRZv

1. 流程：HTML解析DOM → CSS解析CSSOM → 合成渲染树 → 回流（算几何）→ 重绘（画样式）→ 合成显示； 2. 触发：回流（改几何/结构/读布局属性），重绘（改样式不影响几何）； 3. 优化：批量操作DOM/CSS、用transform/opacity做动画、脱离文档流缩小回流范围。

发表于 2025-11-03 06:43:08 回复(1)

秋水夏树

优化回流次数 1. 读写分离。边读边写，会导致改完后，下次读的时候浏览器发现布局发生改变了，会强制同步回流来获取元素的最新信息 2. 修改 DOM 操作合并：设置 display:none 属性，多次更改完后再删除该属性 3. transform 或 opacity 实现动画将操作提至 CPU 处理，直接操作合成层，避免了回流重绘 4. 设置 will-change / transform 将该层提至新的独立合成层中，之后的回流重绘操作都只会在该层内部，不会影响外部元素

发表于 2025-09-15 20:21:54 回复(1)