环境
在咱们日常撰写css样式时，总会有一些CSS特性十分耗费我们的网站特性，导致很多人网址性能比较差。使了我们自己的网页加载迟缓，让用户体验感十分差。在本文，我们将要讨论一些特性耗费非常高的CSS特性及其怎么优化他们。
Box-Shadow
box-shadow属性向原素加上阴影效果的常用形式，但在性能上的确比较差的。我们在很多元素中使用box-shadow以及具有大模糊不清半经时，他会在很大程度上危害网页加载速度，使页面的3D渲染减缓。
下边就是我们提升box-shadow特性常用的：
- 应用比较小的模糊不清半经：比较小的模糊不清半经也会减少展现黑影需要处理3D渲染地区。大家应尽量应用比较小的糊半经而非应用大一点的模糊不清半经，从而达到性能网页页面功效的兼具。
- 应用单色取代渐变色 ：渐变色的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特性的目的是降低3D渲染黑影所需要的核算成本。选用这类技术，能够建立具备唯美外观的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特性常用的：
-
最好使用复用的ps滤镜，简单化转场特效的应用。
-
针对ps滤镜动漫，应用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点一个赞