重排与重绘：触发条件与优化

el.style.width = '100px'        // 改几何 → 重排
const h = el.offsetHeight        // 读几何 → 强制浏览器先重排（同步布局）
// 增删 DOM、改 class、窗口 resize、字体加载完，都可能触发

<!-- 运行环境：任意现代浏览器 -->
<!-- 步骤：存为 brw-l6.html，用浏览器打开，看页面上打印的两种耗时 -->
<!-- 你会看到：循环里「改一下读一下」明显比「先全读再全改」慢 -->

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <style>.item{width:50px;height:20px;background:#3178c6;margin:2px}</style>
</head>
<body>
  <div id="out"></div>
  <script>
    const box = document.createElement('div')
    document.body.appendChild(box)
    for (let i = 0; i < 200; i++) {
      const d = document.createElement('div')
      d.className = 'item'
      box.appendChild(d)
    }
    const list = [...box.children]

    // ❌ 错误写法：循环里「读→写」交错，每次读 offsetWidth 都会强制浏览器先重排上一轮的写
    let t1 = performance.now()
    for (const el of list) {
      el.style.width = (el.offsetWidth + 1) + 'px'   // 读 offsetWidth（触发同步布局）后写样式
    }
    const bad = performance.now() - t1

    // 重置
    list.forEach(el => el.style.width = '50px')

    // ✅ 正确写法：先全部读，再统一改（batch read then write）
    let t2 = performance.now()
    const widths = list.map(el => el.offsetWidth)
    list.forEach((el, i) => { el.style.width = (widths[i] + 1) + 'px' })
    const good = performance.now() - t2

    document.getElementById('out').innerHTML =
      '读改写混合(坏): ' + bad.toFixed(2) + ' ms<br>先读后写(好): ' + good.toFixed(2) + ' ms'
  </script>
</body>
</html>

1. 批量改样式：合并成一次 class 切换，而不是逐个改 style
2. 读改写分离：先集中读几何，再集中写样式
3. rAF 批量写：把 DOM 写入放进 requestAnimationFrame 回调，浏览器下一帧前统一处理
4. 离线操作：用 DocumentFragment 批量插入、或用 display:none 包裹后再改
5. CSS containment：contain: layout paint 声明「本元素不影响外部」，限制重排范围

for (const el of items) {
  el.style.height = el.scrollHeight + 10 + 'px'
}