js实现重排
重排的概念
重排（Reflow）指浏览器重新计算元素的几何属性（如位置、大小），导致页面布局发生变化的过程。重排通常由DOM结构变化、样式修改或窗口缩放等操作触发，性能消耗较大。
触发重排的常见操作
- 添加、删除或修改DOM节点
- 改变元素尺寸（width/height/padding/margin等）
- 调整窗口大小或设备方向变化
- 读取某些布局属性（如offsetTop/scrollTop等）
- 修改默认字体或调整元素字体大小
减少重排的优化方法
批量DOM操作 使用文档片段（DocumentFragment）或离线DOM进行批量操作，减少多次重排：
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const div = document.createElement('div');
fragment.appendChild(div);
}
document.body.appendChild(fragment);分离读写操作 避免在修改样式后立即读取布局属性，将读写操作分开：
// 不良实践（触发多次重排）
element.style.width = '100px';
const width = element.offsetWidth;
element.style.height = '200px';
// 优化后
element.style.width = '100px';
element.style.height = '200px';
const width = element.offsetWidth;使用CSS类名切换 通过修改class而非直接操作style，减少重排次数：
// 代替多次style修改
element.classList.add('active');动画优化
对动画元素使用position: absolute/fixed脱离文档流，或使用CSS3的transform和opacity属性（不会触发重排）：
.animated-element {
transform: translateX(100px);
will-change: transform; /* 提示浏览器优化 */
}避免强制同步布局
某些API会强制浏览器立即执行重排（如offsetTop），注意不要在循环中频繁调用：
// 避免这种写法
for (let i = 0; i < elements.length; i++) {
elements[i].style.width = elements[i].offsetWidth + 'px';
}性能监测工具
- Chrome DevTools的Performance面板可记录重排过程
- 使用
requestAnimationFrame安排视觉变更，确保在浏览器最佳时机执行 - 第三方库如FastDOM（提供读写批处理机制）
通过合理优化，可显著减少页面重排次数，提升渲染性能。高频操作建议使用虚拟DOM技术（如React/Vue）进行批量更新。
