昂贵的 CSS 属性及其优化方法

介绍

某些 CSS 属性在性能方面比其他属性更耗时。如果使用不当，它们会降低网页速度，降低用户响应速度。在本文中，我们将探讨一些性能最耗时的 CSS 属性以及如何优化它们。

盒子阴影

box-shadow 属性是为元素添加阴影效果的常用方法，但它的性能成本可能非常高。当大量元素或模糊半径较大时，它会显著降低网页速度。

您可以通过以下几种方法来降低 box-shadow 的成本：

• 使用较小的模糊半径 — 较小的模糊半径将减少渲染阴影所需的处理量。与其使用较大的模糊半径，不如尝试使用较小的值，但仍然可以达到预期的效果。使用纯色而不是渐变色 — 渐变色的 box-shadow 性能开销可能非常大。与其使用渐变色，不如尝试为 box-shadow 使用纯色。
• 使用 inset 关键字创建内阴影 — 如果您使用 box-shadow 创建内阴影，请使用 inset 关键字。这将提升网页性能，因为它不需要渲染额外的图层。
• 使用 will-change 属性来提升 box-shadow 动画的性能 — 如果你正在为 box-shadow 动画添加动画效果，请使用 will-change 属性来告知浏览器 box-shadow 属性将会发生变化。这将有助于浏览器优化动画的渲染。

总的来说，优化 box-shadow 属性可以减少渲染阴影所需的处理。通过使用这些技巧，您可以创建美观的 box-shadow 属性，同时最大限度地减少对网页性能的影响。

背景图像

background-image 属性用于向元素添加图像，但它的性能开销可能非常大。较大的图像或大量的图像会显著降低网页速度。

要优化 background-image 属性，您可以使用以下技巧：

• 使用较小的图像文件大小
• 使用 JPEG 或 PNG 优化等图像压缩技术
• 使用图像精灵来减少 HTTP 请求的数量
• 使用延迟加载技术仅在需要时加载图像

边界半径

border-radius 属性用于在元素上创建圆角，但它的性能成本可能非常高。当大量元素或半径较大时，它会显著降低网页速度。

要优化 border-radius 属性，可以使用以下技巧：

• 使用较小的边框半径值
• 对于复杂的边框设计，请使用 border-image 属性代替 border-radius
• 使用 SVG 图形进行复杂的边框设计

变换

transform 属性用于对元素进行变换，例如旋转、缩放或倾斜。如果使用不当，可能会造成性能损失。

要优化 transform 属性，可以使用以下技术：

• 尽可能使用 2D 变换而不是 3D 变换
• 使用 will-change 属性来提高动画变换时的性能
• 使用 transform-style:preserve-3d 属性来使用硬件加速

过滤器

滤镜属性用于对元素应用视觉效果，例如模糊、颜色调整或亮度。如果使用不当，可能会造成非常高的性能损失。

要优化过滤属性，可以使用以下技术：

• 使用更简单的滤镜效果
• 使用 will-change 属性来提高动画滤镜的性能
• 使用 transform-style:preserve-3d 属性来使用硬件加速

原始CSS代码：

div {
  filter: blur(5px);
}

优化的CSS代码：

div {
  filter: blur(1px);
  transform: translateZ(0);
}

解释：

我们不再使用较大的模糊半径，而是使用较小的 1px 值。这减少了渲染模糊效果所需的处理量。

我们还添加了一个 transform 属性，其值为 transformZ(0)。这会为元素创建一个新层，有助于 GPU 加速并提高性能。

通过使用这种优化的CSS代码，我们可以实现相同的视觉效果，同时减少对网页性能的影响。

结论

通过优化 CSS 属性（例如 box-shadow、filter 和 border-radius），我们可以提升网页的性能。技巧包括使用较小的值、更简单的形状，以及使用 transform 属性创建新的图层。这些优化有助于创建外观精美、性能卓越的网页。

P/s：缩略图来自https://kinsta.com/，请查看该页面，它有很多很酷的文章