浏览器触发回流的API完整清单

触发回流的API完整清单

Part 1: 强制立即回流（读取操作）

1. 元素尺寸和偏移（Element Dimensions & Offset）

2. 客户区尺寸（Client Dimensions）

3. 滚动相关（Scroll Properties）

4. 矩形和位置（Rectangles & Position）

5. 计算样式（Computed Style）

6. 窗口和视口（Window & Viewport）

7. 文档滚动（Document Scroll）

8. 焦点和交互（Focus & Interaction）

9. 鼠标事件属性（Mouse Event Properties）

10. DOM查询和匹配（DOM Query）

11. Range和Selection（范围和选区）

12. SVG相关（SVG Specific）

Part 2: 标记需要回流（写入操作）

1. 盒模型属性（Box Model）

2. 外边距（Margin）

3. 内边距（Padding）

4. 边框（Border）

5. 定位（Position）

6. 显示和布局（Display & Layout）

7. Flexbox属性

8. Grid属性

9. 文本和字体（Text & Font）

10. 溢出和滚动（Overflow & Scroll）

11. DOM操作

12. 类和属性操作

13. 表格相关

14. 列表相关

15. 其他布局属性

Part 3: 不触发回流（只触发重绘或合成）

只触发重绘的属性

只触发合成的属性（GPU加速）

对比总结

性能优化策略

1. 避免强制同步布局

// ❌ 错误：写入后立即读取
element.style.width = '100px'
const width = element.offsetWidth  // 强制同步布局

// ✅ 正确：读写分离
const width = element.offsetWidth  // 先读
element.style.width = '100px'      // 后写

2. 批量操作

// ❌ 错误：逐个修改
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = '100px'
}

// ✅ 正确：使用CSS类
const style = document.createElement('style')
style.textContent = '.new-width { width: 100px; }'
document.head.appendChild(style)
elements.forEach(el => el.classList.add('new-width'))

// 🚀 最佳：使用CSS变量
document.documentElement.style.setProperty('--item-width', '100px')
// CSS: .item { width: var(--item-width); }

3. 使用Transform代替位置属性

// ❌ 慢：触发回流
element.style.left = '100px'
element.style.top = '100px'

// ✅ 快：不触发回流
element.style.transform = 'translate(100px, 100px)'

4. 缓存布局信息

// ❌ 错误：重复读取
for (let i = 0; i < 100; i++) {
  console.log(element.offsetWidth)  // 触发100次
}

// ✅ 正确：缓存值
const width = element.offsetWidth   // 只触发1次
for (let i = 0; i < 100; i++) {
  console.log(width)
}

5. 使用requestAnimationFrame分帧

// ❌ 错误：一次性处理大量元素
for (let i = 0; i < 10000; i++) {
  elements[i].style.width = '100px'
}

// ✅ 正确：分帧处理
let index = 0
function processBatch() {
  const end = Math.min(index + 500, elements.length)
  for (let i = index; i < end; i++) {
    elements[i].style.width = '100px'
  }
  index = end
  if (index < elements.length) {
    requestAnimationFrame(processBatch)
  }
}
processBatch()

快速参考卡片

触发回流的操作

不触发回流的操作

触发回流工作机制

浏览器靠「监听触发源 + 维护渲染队列 + 脏检查」机制感知布局变化，核心是精准捕捉 “影响几何属性 / 结构” 的操作，具体流程如下：

监听触发事件：浏览器内置监听逻辑，一旦检测到前文提到的触发源（如修改 width、增删 DOM、窗口 resize），就标记该元素为 “布局脏元素”。维护渲染队列：不会立即回流，而是将所有 “脏元素” 加入队列，等待浏览器空闲时批量处理（避免频繁计算）。强制刷新触发：若代码读取 offsetWidth 等布局属性，浏览器会立即清空队列、执行回流，确保读取到最新布局数据。