这篇我给你整理成一页纸终极背诵稿，面试遇到浏览器渲染 / 重排重绘 / 性能优化，直接照着背，稳拿满分。
浏览器渲染原理 · 面试终极版
一、完整渲染流程（必背）
- 解析 HTML，生成 DOM 树
- 解析 CSS，生成 CSSOM 树
- DOM + CSSOM 合并，生成 渲染树（RenderTree）
- 重排（Layout/Reflow）：计算元素位置、大小
- 重绘（Paint）：绘制元素颜色、背景、样式
- 合成（Composite）：图层交给 GPU，合成显示到屏幕
二、重排、重绘、合成 核心区别
1. 重排（Reflow/Layout）
- 定义：元素几何信息变化，浏览器重新计算布局
- 触发：宽高、位置、边距、增删DOM、窗口resize
- 开销：最大，会影响父元素、子元素、兄弟元素
- 结论：重排 一定会触发 重绘
2. 重绘（Repaint）
- 定义：元素外观变化，但位置大小不变
- 触发：颜色、背景色、阴影、visibility
- 开销：中等
- 结论：重绘 不会触发 重排
3. 合成（Composite）
- 定义：GPU 对图层做位移、变形、透明度混合
- 触发：
transform、opacity - 开销：最小，GPU 加速，丝滑不卡顿
- 结论：既不重排，也不重绘
三、性能开销排序（张口就来）
重排 >>> 重绘 >>> 合成
四、高频考点：哪些属性触发什么？
- 触发重排：width、height、margin、padding、left、top、font-size、display、position、float
- 只触发重绘：color、background-color、box-shadow、border-color、visibility
- 只走合成：transform、opacity
五、如何减少重排重绘？（标准答案）
- 动画优先使用 transform、opacity
- 批量修改 DOM，使用 DocumentFragment
- 避免频繁读取布局属性（offsetWidth、clientTop 等）
- 使用 will-change 提前提升图层
- 尽量用 CSS 动画，少用 JS 频繁修改样式
- 避免层级过多，防止图层爆炸
六、30 秒口述总结（面试满分版）
浏览器先解析 HTML 和 CSS 生成 DOM 与 CSSOM，合并成渲染树，
然后经过重排计算位置大小、重绘绘制样式、合成图层显示。
重排开销最大，重绘次之，transform 和 opacity 只走合成，性能最优。
优化核心：能合成不重绘，能重绘不重排。
这一套背熟，面试官不管怎么问：
- 输入 URL 到页面展示
- 重排重绘是什么
- 合成层做了什么
- 如何做性能优化