性能优化是自身和项目发展到一定程度都避不开的话题，性能优化需要从多个维度进行，比如资源部署、缓存方案、资源压缩、http协议、代码实现、异步加载等都有优化的空间。

今天给大家讲解一下css是如何做性能优化的。

图层

当浏览器解析和渲染页面时，它会根据需要将页面分割成多个图层，这样可以独立地处理和渲染这些层，从而提高性能。例如，设置了transform属性的元素、或者设置了will-change属性的元素，可能会被提升到一个新的图层中。

图层分割是渲染引擎内部的一个很复杂机制。

比如，浏览器会根据层叠上下文的规则，将渲染树分割成多个图层。每个层叠上下文通常会对应一个或多个图层。例如，一个设置了z-index的元素和它的所有子元素会形成一个单独的图层，而其他没有设置z-index的元素可能会共享一个图层。

接下来说下什么是合成层。

合成层

合成层是浏览器渲染过程中的一个阶段，它涉及到将多个图层合并成一个最终的视图。这个过程通常在GPU（图形处理单元）中进行，以提高渲染效率。

具体来说，合成层具有以下特点：

1. 分层渲染：浏览器会将页面内容分割成多个图层，每个图层可以包含页面的一部分内容，如文本、图片、HTML元素等。这些图层可以独立进行变换、缩放、旋转等操作。
2. 硬件加速：合成层通常利用GPU来进行硬件加速，这样可以更快地处理复杂的图形和动画效果。当图层被标记为硬件加速时，浏览器会将这些图层的渲染任务交给GPU来执行。
3. 独立更新：由于每个图层都是独立的，它们可以单独更新而不影响其他图层。这意味着当页面的某一部分发生变化时，浏览器只需要重新渲染受影响的图层，而不是整个页面。
4. 图层合并：在所有图层独立渲染完成后，浏览器会将它们合并成一个单一的图层，然后显示在屏幕上。这个过程称为合成（Compositing），它是渲染流程的最后阶段。
5. 性能优化：合成层在处理动画、滚动和其他复杂交互时。通过减少不必要的重绘（Repaint）和重排（Reflow），合成层可以减少CPU和GPU的工作量，从而提高渲染效率。比如通过transform来移动元素，这个移动是发生在图层之间，因此只会重绘，不会重排，而单独的重绘要比重排效率高很多。
6. 不阻塞主线程：浏览器的合成层（Composite Layer）通常是由GPU（图形处理单元）来处理的，这意味着它能够独立于主线程（Main Thread）进行渲染操作。GPU专门负责处理图形和图像的渲染，因此它可以并行处理大量的像素数据，这比使用CPU（中央处理单元）高效的多。

如何触发硬件加速

在实际应用中，浏览器会根据元素的属性和行为来决定是否将一个普通图层提升为合成层。例如，当元素使用了transform、opacity动画或者will-change属性时，浏览器可能会将其提升为合成层以利用硬件加速。

当图层被标记为“硬件加速”时，浏览器会使用 GPU（图形处理单元）来渲染和合成这些图层，而不是依赖 CPU，这样可以提高页面的渲染性能，尤其是在处理动画和复杂交互的时候。

下面的CSS属性可以触发硬件加速，

如transform、opacity、filter、perspective、will-change等。

被这些属性标记的元素，就会被提升为合成层，从利用GPU进行硬件加速。

另外还有一个属性，contain。

contain是让被标记的元素隔离出来，这样元素的布局、样式、绘制、尺寸等的计算就会被限制在DOM子树，而不是整个页面，从而让性能更好。

上面就是css做性能优化的几点，但需要注意的是，虽然上面的属性能使用GPU提升页面性能，但是不可滥用，一定要结合自己页面的合理的使用。过度使用这些属性可能会导致性能问题，因此应该谨慎使用