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

[问答题]

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

想要offer的干饭人很年轻

解析html构建dom树->解析css构建cssom树->二者合成构建渲染树->回流->重绘->合成显示。触发：回流：元素几何、结构、位置等属性发送改变，浏览器需要重新计算元素的几何属性。重绘：元素视觉表现发生改变，如颜色、背景、可见性等，但几何属性没有发生改变，浏览器会进行重绘。优化：读写分离，强制避免同步布局；批量处理DOM操作；使用csstransform和opacity实现动画；避免使用table布局；将频繁回流的元素提升为独立元素。

发表于 2026-03-16 21:49:32 回复(1)

DRZv

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

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

WangYibo

1.解析HTML & CSS-->构建DOM & CSSOM 树，生成渲染树，【回流】和【】重绘呈现出来，优化的关键在与最小化回流和重绘的次数范围

发表于 2026-01-14 14:10:12 回复(0)

秋水夏树

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

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

努力上岸的momo

1.浏览器获取到html，解析生成dom； 2.在解析html时，遇到css链接会并行加载css并解析成为cssom。 3.dom和cssom合并成为渲染树 4.根据渲染树计算布局 5.绘制元素到屏幕上回流：更改dom元素的宽高、定位等，需要重新计算布局重绘：更改元素的颜色、背景、透明度等等；优化：合并dom操作、脱离文档流减少回流的范围、使用transform或opacity实现动画，直接操作合成层

发表于 2026-02-25 16:41:13 回复(0)

已转码的钝角很开心

优化的关键是最小化回流和重绘的次数

发表于 2026-02-22 11:43:38 回复(1)

Crish07

1. 构建DOM/CSSOM 解析 HTML 生成 DOM 树 -> 解析 CSS 生成 CSSOM 树，这一步是阻塞进行的，如果 CSS 加载慢，会导致页面白屏 -> 执行 JS 也会阻塞渲染，因为它可能操作 DOM 或者 CSSOM，所以通常建议 script 标签放底部或者添加 async / defer 2. 回流与重绘的触发 DOM + CSSOM -> Render Tree -> Layout/Reflow（布局/回流）-> Paint（绘制/重绘）-> Composite（合并） Layout：元素节点几何变化，比如宽高改变还有DOM结构变化，都会触发回流 Paint：元素样式调整，会触发重绘 Composite：动画 transform、opacity 这些会提升图层，会跳过 layout 和 paint ，直接合并处理 3. 优化建议 - 如果需要批量修改 css 样式，不建议一条条修改，建议切换 class 名的方式 - 避免强制同步布局，比如 offsetHeight、clientWidth 这类属性，先读再写 - 合理使用 transform 搭配 will-change: transfrom，提升图层 - 避免重复操作 DOM，多使用 vNode

发表于 2026-02-10 10:25:03 回复(0)