CSS性能优化实战：减少重排和重绘的10个高效技巧
大家好，我是全栈老李。今天咱们聊点硬核的——CSS性能优化。很多前端同学可能觉得CSS就是写写样式，能跑就行，但真正的高手都知道，CSS写得不好，页面卡成PPT可不是开玩笑的。尤其是重排（Reflow）和重绘（Repaint），这两个家伙简直是性能杀手。
重排和重绘是啥？
简单来说：
- 重排：浏览器重新计算元素的几何属性（比如宽高、位置），然后重新布局整个页面。
- 重绘：浏览器重新绘制受影响的部分（比如颜色、背景），但不改变布局。
重排一定会触发重绘，但重绘不一定触发重排。比如改个color只会重绘，但改个width就得重排+重绘。
10个实战技巧
1. 避免频繁操作DOM
每次操作DOM都可能触发重排，尤其是连续修改样式时。比如：
// 错误示范（触发多次重排）
const box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '200px';
box.style.margin = '10px';
// 正确做法（合并修改，减少重排）
box.style.cssText = 'width: 100px; height: 200px; margin: 10px;'; // 全栈老李：一次性改完，性能更优
2. 使用transform和opacity做动画
这两个属性不会触发重排，动画性能直接起飞：
.box {
transition: transform 0.3s ease;
}
.box:hover {
transform: scale(1.1); /* 全栈老李：GPU加速，丝滑不卡顿 */
}
3. 避免使用table布局
table的单元格一改，整个表格都可能重排。能用flex或grid就别用table。
4. 批量修改DOM
比如要插入多个li，别一个个插，先拼字符串再一次性插入：
const list = document.getElementById('list');
const fragment = document.createDocumentFragment(); // 全栈老李：文档片段减少重排
for (let i = 0; i < 100; i++) {
const li = document.createElement('li');
li.textContent = `Item ${i}`;
fragment.appendChild(li);
}
list.appendChild(fragment);
5. 使用will-change提前告诉浏览器
.box {
will-change: transform; /* 全栈老李：浏览器会提前优化 */
}
6. 避免强制同步布局（Layout Thrashing）
比如在循环中读取offsetHeight，再修改样式，会导致浏览器反复重排：
// 错误示范
for (let i = 0; i < boxes.length; i++) {
const height = boxes[i].offsetHeight; // 读取
boxes[i].style.height = height + 10 + 'px'; // 写入
}
// 正确做法：先读取，再写入
const heights = boxes.map(box => box.offsetHeight); // 全栈老李：批量读取
heights.forEach((height, i) => {
boxes[i].style.height = height + 10 + 'px';
});
7. 用class代替直接改style
// 错误示范
element.style.color = 'red';
element.style.fontSize = '16px';
// 正确做法
element.classList.add('highlight'); // 全栈老李：CSS类名管理更高效
8. 减少层级嵌套
选择器越复杂，匹配越慢：
/* 错误示范 */
div > ul > li > a span { ... }
/* 正确做法 */
.highlight-span { ... } /* 全栈老李：扁平化选择器 */
9. 离线操作DOM
比如先display: none改完再显示：
const box = document.getElementById('box');
box.style.display = 'none'; // 全栈老李：离线操作，避免中间状态重排
// ...一顿猛改
box.style.display = 'block';
10. 善用requestAnimationFrame
动画用requestAnimationFrame比setTimeout更稳：
function animate() {
// 改样式
requestAnimationFrame(animate); // 全栈老李：和浏览器刷新率同步
}
animate();
课后作业
面试题： 写一个函数，检测页面中哪些元素触发了重排？
function detectReflow() {
// 你的代码 here
// 要求：返回触发重排的元素列表
}
提示： 可以用getComputedStyle或offsetHeight等强制重排的API来检测。
大家可以在评论区交作业，我会随机抽几位同学的答案点评哦～
我是全栈老李，下期见！
