Web性能优化：重排原理与实战技巧

1. 重排的本质与性能影响

在Web开发中，当DOM元素的几何属性发生变化时，浏览器需要重新计算元素的位置和几何信息，这个过程称为"重排"（Reflow）。重排是浏览器渲染过程中最昂贵的操作之一，频繁触发会导致明显的性能问题。

重排之所以消耗资源，是因为它触发了渲染树的重新计算。浏览器需要从DOM树的根节点开始遍历，确定每个可见元素的新尺寸和位置，然后更新渲染树。这个过程是递归的，某个节点的变化可能导致其子节点、父节点甚至同级节点都需要重新计算。

注意：重排一定会引发重绘（Repaint），但重绘不一定触发重排。理解这个区别对性能优化至关重要。

2. 常见触发重排的JavaScript操作

2.1 几何属性读取与修改

任何会改变元素几何属性的操作都会触发重排，包括但不限于：

javascript复制// 尺寸相关
element.style.width = '100px';
element.style.height = '50%';
element.style.padding = '2em';

// 位置相关
element.style.margin = '10px';
element.style.position = 'absolute';
element.style.left = '100px';
element.style.top = '50px';

// 显示/隐藏
element.style.display = 'none';  // 触发父元素及后续兄弟元素重排
element.style.visibility = 'hidden';  // 仅重绘，不重排

有趣的是，某些看似无害的属性读取也会强制触发同步重排：

javascript复制// 这些读取操作会强制浏览器执行同步布局计算
const width = element.offsetWidth;
const height = element.offsetHeight;
const top = element.offsetTop;
const left = element.offsetLeft;

2.2 DOM树结构变化

DOM的增删改操作几乎都会引起重排：

javascript复制// 添加/删除节点
pare