[!info] related notes

• 所属 MOC: 浏览器 JS MOC, browser
• 上位主题: 浏览器中的 JavaScript
• 相邻主题: javascript-dom, javascript-events, HTML 中的 JS 脚本, virtual-dom, Hydration 水合
• 性能优化: debounce-and-throttle, critical-rendering-path, 重排与重绘

浏览器渲染过程

这篇笔记关注页面从资源到可见像素的大致路径，以及 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 做动画
• 在滚动、输入、拖拽等高频场景里控制更新频率

与重排、重绘的关系

本文只保留渲染流水线中的位置关系；重排与重绘的详细区别、触发条件和性能取舍统一维护在 重排与重绘。

学习检查

不看正文回答：

1. 从 HTML/CSS 到屏幕像素，浏览器渲染主线包含哪些关键阶段？
2. DOM/CSSOM、布局、绘制、合成分别解决什么问题？
3. 为什么“读布局 → 写样式 → 再读布局”容易造成布局抖动？
4. React/Vue 的虚拟 DOM 为什么不能绕过浏览器真实渲染成本？
5. 一个动画只改变 transform 时，为什么通常比持续修改几何尺寸更容易获得稳定性能？
6. 如果页面卡顿，你会怎样区分是 JavaScript 长任务还是布局/绘制成本？