CSS重排重绘优化技术是前端性能优化的核心环节。本文将通过具体案例展示如何有效减少浏览器的重排重绘次数。
什么是重排重绘
当DOM元素的几何属性发生变化时，浏览器需要重新计算元素的几何信息并重新绘制页面，这个过程称为重排（reflow）。如果只是改变了元素的外观而没有改变其几何属性，则会触发重绘（repaint）。
常见性能问题
/* 低效写法 */
.element {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 1px solid #000;
}
优化方案
1. 合并DOM修改
// 避免多次重排
const element = document.querySelector('.element');
// ❌ 不推荐：多次DOM操作
element.style.width = '200px';
setTimeout(() => { element.style.height = '200px'; }, 100);
// ✅ 推荐：批量处理
element.style.cssText += 'width: 200px; height: 200px;';
2. 使用transform代替布局属性
/* ❌ 高频重排 */
.item { left: 100px; top: 100px; }
/* ✅ 优化后 */
.item { transform: translate(100px, 100px); }
3. 避免强制同步布局
// ❌ 不推荐
const element = document.querySelector('.element');
console.log(element.offsetWidth);
// 强制重排
element.style.width = '200px';
// ✅ 推荐
const element = document.querySelector('.element');
// 先获取值，再统一修改
const width = element.offsetWidth;
element.style.width = '200px';
通过以上优化，可以显著减少页面重排重绘次数，提升页面流畅度。
讨论