浏览器的 重绘 (Repaint) 和 回流 (Reflow，也称重排/Layout) 是前端性能优化中非常核心的概念。理解它们的区别有助于写出性能更好的页面。 简单的一句话总结：回流一定会触发重绘，但重绘不一定会触发回流。 --- 1. 概念定义 为了理解这两个概念，首先需要知道浏览器渲染页面的简要流程： 1. 解析 HTML 生成 DOM 树。 2. 解析 CSS 生成 CSSOM 树。 3. 将 DOM 和 CSSOM 合并生成 渲染树 (Render Tree)。 4. 回流 (Layout/Reflow)：根据渲染树，计算每个节点在屏幕上的几何信息（位置、大小）。 5. 重绘 (Painting)：根据计算好的几何信息，将节点的像素（颜色、背景等）绘制到屏幕上。 6. 合成 (Composite)：将多个层合成最终图像。 回流 (Reflow / Layout) 当渲染树中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。 核心： 涉及几何信息（位置、大小）的改变。 比喻： 就像你在房间里重新摆放家具，你移动了沙发，可能连带茶...
播面