CSS 性能优化：别让你的页面“慢性自杀”
各位前端的伙伴们，有没有遇到过这种情况：兴高采烈地写完一个页面，自信满满地丢给测试，结果测试小姐姐（或者小哥哥）眉头一皱，来了句：“卡顿严重！性能不行！”
那一瞬间，感觉就像精心打扮准备去约会，结果出门踩了一脚泥，还是那种怎么擦都擦不干净的泥。
别慌！这种情况，八成是你的 CSS 在搞事情。CSS 写得不好，就像给你的页面埋了一颗“慢性自杀”的雷，它不会立刻爆炸，但会慢慢地消耗你的性能，让你的页面变得越来越卡顿，用户体验越来越差。
今天，咱们就来聊聊 CSS 性能优化这事儿，重点聚焦在“重排”、“重绘”和“合成”这三个罪魁祸首身上，看看怎么才能避免它们，让你的页面跑得飞快。
重排（Reflow）：牵一发而动全身的蝴蝶效应
想象一下，你在玩多米诺骨牌，推倒第一张，后面的骨牌就会跟着连锁反应，全部倒下。重排就有点像这个多米诺骨牌效应，它指的是浏览器为了重新计算元素的位置和大小，需要重新渲染整个或部分文档的过程。
哪些操作会触发重排呢？
- 改变元素的位置和大小： 比如修改元素的
width、height、margin、padding等属性。 - 改变元素的结构： 比如添加或删除 DOM 节点。
- 改变元素的显示状态： 比如修改
display属性（从none到block）。 - 获取某些布局信息： 比如访问
offsetWidth、offsetHeight、scrollTop、scrollWidth等属性。
为什么重排很耗性能？
因为重排会触发浏览器重新计算布局，这涉及到大量的计算，尤其是在复杂的页面中，这个计算量会非常大。更糟糕的是，重排往往会伴随着重绘，这更是雪上加霜。
如何减少重排？
- 避免频繁操作 DOM： 这是最重要的一点！如果需要频繁修改 DOM，可以考虑使用文档片段（
DocumentFragment）或者将 DOM 节点先display: none，修改完后再显示。 - 尽量批量修改样式： 不要一条一条地修改样式，可以使用 CSS 类名来一次性修改多个样式。
- 避免频繁读取布局信息： 在循环中读取布局信息，会强制浏览器进行同步布局，导致性能问题。可以将布局信息缓存起来，避免重复读取。
- 使用
transform和opacity进行动画： 这两个属性不会触发重排，只会触发合成（稍后会讲到）。 - 使用
position: absolute或position: fixed将元素脱离文档流： 这样可以避免元素的改变影响其他元素的布局。
举个例子：
假设我们要实现一个简单的动画，让一个元素从左到右移动。
糟糕的写法：
let element = document.getElementById('myElement');
let left = 0;
setInterval(() => {
left += 1;
element.style.left = left + 'px'; // 每次修改都触发重排
}, 10);更好的写法：
let element = document.getElementById('myElement');
let left = 0;
setInterval(() => {
left += 1;
element.style.transform = `translateX(${left}px)`; // 使用 transform，只触发合成
}, 10);看到区别了吗？使用 transform 可以避免重排，让动画更加流畅。
重绘（Repaint）：给页面刷油漆
重绘指的是浏览器重新绘制屏幕上元素的过程。当元素的样式发生改变，但不影响其在文档流中的位置和大小，就会触发重绘。
哪些操作会触发重绘呢？
- 改变元素的颜色： 比如修改
color、background-color、border-color等属性。 - 改变元素的文本内容： 比如修改
textContent或innerText属性。 - 改变元素的可见性： 比如修改
visibility属性。 - 改变元素的阴影： 比如修改
box-shadow属性。
为什么重绘也耗性能？
虽然重绘不像重排那么“牵一发而动全身”，但它仍然需要浏览器进行大量的计算，尤其是在复杂的页面中，这个计算量也不容小觑。
如何减少重绘？
- 避免频繁修改样式： 尽量批量修改样式，可以使用 CSS 类名来一次性修改多个样式。
- 使用
will-change属性： 这个属性可以提前告诉浏览器哪些元素将会发生变化，让浏览器提前做好优化准备。 - 使用
opacity进行透明度动画： 修改opacity属性只会触发合成，不会触发重绘。
举个例子：
假设我们要实现一个鼠标悬停效果，改变元素的背景颜色。
糟糕的写法：
#myElement:hover {
background-color: red; // 触发重绘
}更好的写法：
#myElement {
background-color: rgba(255, 0, 0, 0); /* 初始透明度为 0 */
transition: background-color 0.3s ease;
}
#myElement:hover {
background-color: rgba(255, 0, 0, 1); /* 鼠标悬停时改变透明度 */
}虽然两种写法都改变了背景颜色，但是第二种写法使用了 transition 和 rgba，通过改变透明度来实现动画效果，这样只会触发合成，不会触发重绘。
合成（Composite）：高效的图像合成
合成指的是浏览器将不同的图层合并到屏幕上的过程。浏览器会将页面分成多个图层，每个图层都有自己的绘制上下文，最后将这些图层合成为最终的图像。
什么情况下会创建新的图层？
- 拥有 3D
transform属性。 - 使用了
<video>或<iframe>标签。 - 使用了
will-change属性。 - 使用了
opacity属性。 - 拥有硬件加速的 Canvas。
为什么合成很高效？
因为合成是在 GPU 中进行的，GPU 擅长处理图形和图像，所以合成的性能很高。而且，合成不会影响其他元素的布局和绘制，所以不会触发重排和重绘。
如何利用合成优化性能？
- 尽量使用
transform和opacity进行动画： 这两个属性只会触发合成，不会触发重排和重绘。 - 使用
will-change属性： 这个属性可以提前告诉浏览器哪些元素将会发生变化，让浏览器提前做好优化准备，并将其提升为新的图层。
举个例子：
假设我们要实现一个滚动视差效果。
糟糕的写法：
window.addEventListener('scroll', () => {
let scrollTop = window.pageYOffset;
document.getElementById('parallax').style.top = scrollTop * 0.5 + 'px'; // 触发重排和重绘
});更好的写法：
#parallax {
will-change: transform; /* 提前告诉浏览器该元素会发生变化 */
}
window.addEventListener('scroll', () => {
let scrollTop = window.pageYOffset;
document.getElementById('parallax').style.transform = `translateY(${scrollTop * 0.5}px)`; // 使用 transform，只触发合成
});使用 will-change 和 transform 可以将视差元素提升为新的图层，并使用 GPU 进行渲染，从而提高性能。
总结：避免“慢性自杀”，拥抱流畅体验
好了，说了这么多，相信大家对 CSS 性能优化已经有了一定的了解。简单来说，就是要尽量避免重排和重绘，多利用合成。
记住，性能优化不是一蹴而就的事情，需要我们在日常开发中养成良好的习惯，时刻关注页面的性能表现。
最后，送给大家几句箴言：
- 不要过度设计： 避免使用过于复杂的 CSS 样式，简洁才是王道。
- 善用工具： 利用 Chrome DevTools 等工具，分析页面的性能瓶颈，找出需要优化的地方。
- 持续学习： 前端技术日新月异，要不断学习新的知识和技巧，才能更好地优化页面性能。
希望这篇文章能帮助大家更好地理解 CSS 性能优化，让我们的页面告别“慢性自杀”，拥抱流畅的用户体验！ 让我们一起成为优化小能手，让测试小姐姐（或者小哥哥）对我们刮目相看吧！