欢迎大家来到IT世界,在知识的湖畔探索吧!

前言：

网站加载缓慢，除了后端、JS与CDN背锅外，CSS也有可能是其中之一。虽然影响性质可能小于前面几位大佬，但是为了提高整体体验，还是很有必要了解的。

1.减少不必要的高消耗属性box-shadowborder-radiusposition: fixedtransform:nth-childfilter

上述几个CSS属性对性能要求相对较高。单页面少数使用不会产生影响。

当单页面罗列大量数据（几百条），且均涉及到上述部分样式，整体CSS渲染压力就会产生较为明显的差异，所以建议针对场景谨慎使用。

2.减少重复样式代码

多个元素或选择器需要相同CSS属性时，建议通过逗号组合相关选择器统一声明样式，避免单独重复声明。

优化前：

.header {
    color:#6d6d6d;
    margin: 10px 0;
    text-align: center;
}
.footer {
    color:#6d6d6d;
    margin: 10px 0;
    text-align: center;
}

欢迎大家来到IT世界,在知识的湖畔探索吧!

优化后：

欢迎大家来到IT世界,在知识的湖畔探索吧!.header, .footer {
    color:#6d6d6d;
    margin: 10px 0;
    text-align: center;
}

3.简化选择器

设置HTML元素的方法有很多种，复杂的CSS选择器可以有多层级，但是这往往也会增加解析的耗时。降低选择器的复杂度可以减少浏览器解析的负载同时也能增加代码简洁增加可读性。当然也可以结合实际场景进行判断需求。

优化前：

.header>div.header-navigation ul li .option {
    color:#6d6d6d;
    text-align: center;
}

优化后：

欢迎大家来到IT世界,在知识的湖畔探索吧!.header .option {
    color:#6d6d6d;
    text-align: center;
}

4.避免使用 !important

当HTML元素存在多个重叠的样式时，除非不得不用，尽量避免通过 !Important 提升某一个样式的优先级。

添加 !Important CSS声明将覆盖掉其他对应的样式声明，如果CSS的规则中 !Important 太多，浏览器就必须对代码进行额外的检查，这可能会降低页面的加载速度。所以，尽量避免使用 !Important 。在很多情况下我们是可以通过选择器来实现样式重写的，除非是想要对第三方库的CSS进行重写。

5.使用CSS特效与SVG替代图片

图片资源相对较大，需要更多的加载时长，页面大量使用图片容易增加页面渲染的负担，虽然现阶段CDN、OSS等技术可以极大程度降低图片的渲染负载，但是还是把需求留给刚需吧，类似渐变、几何图形、边框、按钮等效果可以尽量使用CSS样式实现，甚至也可以使用SVG来替代PNG或者JPG图片。

6.压缩CSS

通过压缩CSS可以减少CSS文件中不必要的空白与换行从而减少文件大小。提升CSS的加载效率，降低加载时长。

7.使用0替换0px

当属性值为0是可以忽略单位。

写单位是没错的，只是当大型CSS文件中，往往存在较多属性值0的样式，忽略单位也可以减少一定的文件大小。

优化前：

.header {
    margin: 10px 0px 10px 0px;
}

优化后：

.header {
    margin: 10px 0;
}

8.尽量使用十六进制来指定颜色

设置颜色色值时使用颜色名称，浏览器需要额外消耗进行识别名称对应的十六进制，同时不同的浏览器识别的效果可能也存在差异，因此使用十六进制可以更精准，也更减少浏览器消耗。

优化前：

.header {
    color: red;
}

优化后：

.header {
    color: #ff0000;
}

9.使用 link 代替 @import

@import 规则主要用于导入资源或者CSS文件。它会阻止其他文件并行下载，并可能会导致网站速度变慢。

在HTML中用 <link> 标签代替 @import，可以并行加载CSS文件，避免等待。

优化前：

@import url("header.css");
@import url("slider.css");
@import url("content.css");
@import url("footer.css");

优化后：

<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="slider.css">
<link rel="stylesheet" href="content.css">
<link rel="stylesheet" href="footer.css">