背景

在我们日常编写css样式时，总是会有一些CSS属性十分消耗我们的网站性能，导致我们网站的性能很差。使的我们的网页加载缓慢，让用户的体验十分差。在本文中，我们将探讨一些性能消耗很高的CSS属性以及如何优化它们。

Box-Shadow

box-shadow属性是向元素添加阴影效果的最常用的方式，但是在性能方面确实很差的。当我们在大量的元素上使用box-shadow或具有大模糊半径时，它会很大程度上影响网页加载速度，使网页的渲染变慢。

下面是我们优化box-shadow性能常用的方法：

• 使用较小的模糊半径：较小的模糊半径会减少呈现阴影所需处理的渲染区域。我们应该尽量使用较小的糊半径而不是使用大的模糊半径，以达到性能和页面效果的兼顾。
• 使用纯色代替渐变 ：渐变的box-shadow在性能方面的消耗是很高的。我们应该尽量使用纯色而不是渐变来创建我们的的box-shadow。
• 使用inset关键字创建内部阴影 ：如果我们要创建内部阴影的话，优先选择使用inset来创建内部阴影。因为使用box-shadow属性时，阴影效果通常需要创建一个额外的图层，因为它需要在元素的底部绘制一个不透明的影子。然而，当使用inset关键字时，阴影效果被绘制在元素内部，无需创建额外的图层。

.shadow {
  box-shadow:inset 0 0 10px rgba(0, 0, 0, 0.5);
}

• 给动画在的box-shadow属性添加will-change属性 ： 如果我们的动画在使用box-shadow属性时，我们应该给它添加一个will-change属性，因为动画效果在使用box-shadow时它需要对元素进行大量的重绘和重排。而will-change会告诉浏览器哪些属性将发生变化，从而让浏览器提前进行优化，以减少性能消耗。这样做可以避免在动画过程中频繁重绘和重排，提高动画的性能和流畅度。

.box {
 box-shadow: 0 0 10px #999;
 transition: box-shadow 0.3s ease-in-out;
 will-change: box-shadow;
}

总的来说，优化box-shadow属性的目标是降低其渲染阴影所需的计算成本。采用这些技术，可以创建具有优美外观的box-shadow，并将对网页性能的影响最小化。

Background Image

background-image属性是我们给元素添加图像时常用的CSS属性，但是如果加载的是大型图像或较多的图像，可能会显著影响页面加载速度，从而影响性能。

下面是我们优化background-image性能常用的方法：

• 使用较小的图像文件大小
• 使用像JPEG或PNG优化这样的图像压缩技术
• 使用图像精灵（Image Sprite）来减少HTTP请求的数量
• 使用懒加载技术仅在需要时加载图像

Border-Radius

border-radius属性是我们创建元素的圆角时常用的CSS属性，但是当它应用于大量元素或具有大半径时，会显著影响页面加载速度，从而影响性能。

下面是我们优化border-radius性能常用的方法：

• 使用较小的边框半径值，以减少性能损失。
• 对于复杂的边框设计，我们应该尽量使用border-image属性而不是border-radius。
• 对于复杂的边框设计，可以考虑使用SVG图形。

Transforms

Transform属性常用于页面元素的变换，如旋转、缩放或倾斜。但是如果我们使用不当，会显著影响页面加载速度，从而影响性能。

下面是我们优化Transforms性能常用的方法：

• 尽量选择2D变换，不到万不得已不使用3D变换。

• 使用will-change属性来提高转换动画的性能。

• 使用Transform-style: preserve-3d属性进行硬件加速。

Filters

Filter属性常用于为页面元素添加视觉效果，如模糊、颜色调整或调整亮度。使用不当时，会显著影响页面加载速度，从而影响性能。

下面是我们优化Filters性能常用的方法：

• 尽量使用可复用的滤镜，简化滤镜效果的使用。

• 对于滤镜动画，使用will-change属性来提高性能。

• 使用Transform-style: preserve-3d属性进行硬件加速。

下面是一个CSS代码示例，展示如何优化Filter属性的使用：

原始CSS代码：

div {
filter: blur(5px);
}

优化后的CSS代码：

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

代码解释：

通过将原始代码中的模糊半径值从5px减小到1px，减少了处理模糊效果所需的计算量。

同时，我们添加了一个Transform属性，使用translateZ(0)来创建一个新的图层。这有助于通过GPU加速来提高性能。

通过使用这种优化后的CSS代码，可以实现与原始代码相同的视觉效果，并减少网页性能的负担。

综上所述，通过优化CSS属性，如box-shadow、filter和border-radius，可以提高网页的性能。优化技巧包括使用较小的值、简化形状以及使用Transform属性创建新的图层等。这些优化方法可以帮助我们创造出既美观又性能良好的网页。

写在最后

伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信：IsZhangjianhao，邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程师～