【前端每天一题】🔥 第 19 题：什么是重排（Reflow）和重绘（Repaint）？有什么区别？如何减少？

下面是 第 19 题：浏览器重排（Reflow）与重绘（Repaint）

依旧保持：详细版 + 高频考点 + 优化方案 + 速记卡片

---

✅ 第 19 题：什么是重排（Reflow）和重绘（Repaint）？有什么区别？如何减少？

这是大型项目必考题。

---

📘 一、浏览器渲染流程（理解重排重绘的前置）

渲染一个页面，浏览器会依次执行：

1. HTML → DOM 树
2. CSS → CSSOM 树
3. DOM + CSSOM → Render Tree 渲染树
4. Layout（排版） → 计算元素的几何位置与大小
5. Paint（绘制） → 填充颜色、边框、阴影等
6. Composite（合成层） → GPU 合成图层

Reflow / Repaint 就发生在这个过程中。

---

📘 二、重排（Reflow，布局）

🧠 定义：

改变元素的几何属性（位置 / 大小 / 布局）时，会触发重排。

重排非常昂贵，因为会影响 渲染树布局。

会触发重排的操作：

• width / height

• padding / margin

• display: none → block

• position (top/left)

• 字体大小变化

• 添加或删除 DOM

• 获取布局信息：

  • offsetWidth / offsetHeight
  • getComputedStyle
  • scrollTop / clientHeight

这些查询会强制浏览器同步布局，也叫 layout thrashing（布局抖动） 。

---

📘 三、重绘（Repaint，绘制）

🧠 定义：

只改变视觉但不改变布局，会触发重绘。

例如：

• background-color
• color
• visibility (不影响布局)
• outline
• box-shadow

重绘比重排便宜得多。

---

📘 四、二者关系

• 重排必然会引发重绘
• 重绘不一定会重排

---

📘 五、如何减少 Reflow / Repaint（面试必背方案）？

---

🚀 1. CSS：避免逐条写内联样式

❌ 多次写 style

✔️ 合并修改

// BAD
div.style.width = "100px"
div.style.height = "100px"
div.style.padding = "10px"

// GOOD
div.style.cssText = "width:100px;height:100px;padding:10px"

---

🚀 2. 批量操作 DOM：使用 DocumentFragment

const frag = document.createDocumentFragment()
for (let i = 0; i < 1000; i++) {
  frag.appendChild(document.createElement('li'))
}
ul.appendChild(frag)

减少 1000 次重排 → 变成 1 次。

---

🚀 3. 读写分离（非常重要）

❌ 读布局 → 写布局 → 读布局 → 写布局

会导致布局抖动

✔️ 先读，再写

const height = div.offsetHeight  // 读
div.style.height = height + 10 + "px"  // 写

---

🚀 4. 使用 classList 一次性更改多个属性

div.classList.add("active")

---

🚀 5. Offscreen 技术：将元素脱离文档流

方法包括：

• display: none（重排一次）
• position: absolute/ fixed
• 移动到屏幕外
• 使用 visibility: hidden（重绘，避开重排）

---

🚀 6. 使用 GPU 加速（transform / opacity）

改变 transform、opacity 不触发布局，也不触发绘制

→ 只发生 合成（Composite） → 最高性能

例如：

transform: translateX(10px);
opacity: 0.5;

动画使用 transform + opacity 是最佳实践。

---

📘 六、速记卡片（10 秒记忆版）

重排 Reflow：改变布局，最昂贵
重绘 Repaint：改变外观，不改变布局

重排 > 重绘 > 合成层  （耗时从大到小）

减少重排：
- 合并 DOM 操作（DocumentFragment）
- 读写分离（避免布局抖动）
- 用 class 操作样式，不逐条写
- 脱离文档流（absolute / display:none）
- 优先使用 transform、opacity 做动画

---

第 20 题：浏览器从输入 URL 到页面渲染全过程（超高频、大厂必考）