【高频考点精讲】CSS性能优化实战：减少重排和重绘的10个高效技巧

CSS性能优化实战：减少重排和重绘的10个高效技巧

大家好，我是全栈老李。今天咱们聊点硬核的——CSS性能优化。很多前端同学可能觉得CSS就是写写样式，能跑就行，但真正的高手都知道，CSS写得不好，页面卡成PPT可不是开玩笑的。尤其是重排（Reflow）和重绘（Repaint），这两个家伙简直是性能杀手。

【初级】前端开发工程师面试100题（一）
【初级】前端开发工程师面试100题（二）
【初级】前端开发工程师的面试100题（速记版）

重排和重绘是啥？

简单来说：

• 重排：浏览器重新计算元素的几何属性（比如宽高、位置），然后重新布局整个页面。
• 重绘：浏览器重新绘制受影响的部分（比如颜色、背景），但不改变布局。

重排一定会触发重绘，但重绘不一定触发重排。比如改个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 {