浏览器渲染过程

从 DOM 和 CSSOM 到布局、绘制、合成，以及重排重绘的关系说明。

#type / concept #status / growing #resource / javascript #resource / web #platform / browser

[!info] related notes

浏览器渲染过程

这篇笔记关注页面从资源到可见像素的大致路径，以及 JavaScript 代码最常影响到的渲染阶段。

渲染主线

  1. 解析 HTML，生成 DOM
  2. 解析 CSS，生成 CSSOM
  3. 合成渲染树
  4. 布局，计算几何位置和尺寸
  5. 绘制
  6. 合成图层并显示

这条链为什么对 React 很重要

React、Vue 这类框架虽然帮你抽象掉了手写 DOM 更新，但最终仍然要落回浏览器渲染链。

所以理解浏览器渲染过程，能帮助你看懂：

  • 为什么频繁 DOM 改动会卡
  • 为什么布局测量和样式写入顺序很重要
  • 为什么 useLayoutEffect 会更敏感
  • 为什么 hydration 不只是“框架概念”，最后也会影响真实渲染和主线程压力

为什么前端常提重排和重绘

  • 重排: 布局信息要重算，代价通常更高
  • 重绘: 外观要重画，但几何位置未必变化
  • 重排通常会带来重绘，反过来不一定

一个最常见的性能坑

如果代码反复这样做：

  1. 读布局信息
  2. 写样式
  3. 再读布局信息

就容易造成布局抖动，拖慢渲染。

JavaScript 最常触发的问题

  • 频繁增删 DOM
  • 连续读写布局属性造成布局抖动
  • 修改会影响尺寸和位置的样式
  • 在高频事件里直接做大量同步 DOM 操作

常见优化方向

  • 批量修改 DOM
  • 读布局与写样式尽量分离
  • 优先用 transform、opacity 做动画
  • 在滚动、输入、拖拽等高频场景里控制更新频率

面试要点

来自 reflow-vs-repaint-interview-question 的面试视角整理。

一句话回答

回流是布局信息重新计算，通常代价更高；重绘是元素外观重新绘制，但几何信息不一定变化。

面试回答主线

回流

  • 也常叫重排
  • 会影响元素尺寸、位置或文档流
  • 浏览器需要重新做布局计算

重绘

  • 只影响外观，不一定影响布局
  • 比如颜色、背景变化
  • 不一定需要重新计算几何位置

一个常见结论

回流通常会带来重绘，但重绘不一定会导致回流。

常见触发场景

  • 修改元素宽高、边距、定位
  • 增删 DOM 节点
  • 频繁读取布局属性又写入样式
  • 在高频事件里直接操作大量 DOM

常见优化方向

  • 批量修改 DOM
  • 减少读写交替造成的布局抖动
  • 动画优先使用 transform 和 opacity
  • 高频场景配合 debounce-and-throttle

最短记忆方式

回流重算布局，重绘重画外观。

放回主题图里看

创建于 2025/1/1 更新于 2026/5/27