CSS 作为控制网页样式的关键技术，其性能的优劣直接影响着用户体验。优化 CSS 性能不仅可以提升网站的加载速度，还能增强用户的满意度和忠诚度。本文将为你详细介绍一系列实用的 CSS 性能优化技巧，并结合代码示例进行分析。
一、精简 CSS 代码
1.1 删除未使用的 CSS 规则
在项目开发过程中，随着功能的不断迭代和修改，CSS 文件中很可能会积累一些未使用的规则。这些冗余的代码不仅会增加文件体积，还会延长浏览器的解析时间。因此，定期清理未使用的 CSS 规则是优化性能的重要一步。
例如，在一个电商网站的项目中，最初为了实现商品列表的某种特殊样式，添加了如下 CSS 规则：
.product - list li.special - style {
color: #ff0000;
font - size: 16px;
text - decoration: underline;
}
但后来由于业务需求的变更，这种特殊样式不再使用，但该规则却一直留在 CSS 文件中。我们可以使用工具如 PurgeCSS 来自动检测并删除这类未使用的 CSS 规则。PurgeCSS 会分析 HTML 文件，找出实际使用的 CSS 类，然后删除那些未被引用的规则，从而有效精简 CSS 代码。
1.2 合并重复的样式
在编写 CSS 时，可能会出现多个选择器应用相同样式的情况。此时，将这些重复的样式合并，可以减少代码量，提高文件的可读性和维护性。
假设我们有以下 CSS 代码：
.header {
background - color: #333;
color: #fff;
padding: 10px;
}
.footer {
background - color: #333;
color: #fff;
padding: 10px;
}
可以将其合并为：
.header,
.footer {
background - color: #333;
color: #fff;
padding: 10px;
}
通过这种方式，不仅减少了代码量，而且当需要修改这些公共样式时，只需要在一处进行更改，避免了在多个地方重复修改可能导致的不一致问题。
二、优化选择器
2.1 避免使用通配选择器（*）
通配选择器（*）会匹配页面上的所有元素，这在计算样式时会消耗大量的性能。除非确实有必要对所有元素应用相同的样式，否则应尽量避免使用通配选择器。
例如，以下代码使用通配选择器设置所有元素的边距和内边距为 0：
* {
margin: 0;
padding: 0;
}
如果页面元素较多，这种做法会导致浏览器需要对大量元素进行样式计算，影响性能。更好的做法是针对特定的元素或元素组进行样式设置，如：
body,
html {
margin: 0;
padding: 0;
}
这样可以明确指定需要应用样式的元素，减少不必要的计算。
2.2 减少选择器的嵌套层级
选择器的嵌套层级越深，浏览器在解析时需要进行的匹配计算就越多，性能消耗也就越大。因此，应尽量减少选择器的嵌套层级，保持选择器的简洁性。
比如，下面这种过深的嵌套选择器：
.container.content.section ul li a {
color: #007bff;
}
可以优化为：
.nav - link {
color: #007bff;
}
通过为目标元素添加合适的类名，直接使用类选择器来设置样式，既提高了性能，又使代码更加清晰易读。
三、合理使用 CSS 特性
3.1 避免使用 @import
@import 规则用于在一个 CSS 文件中导入另一个 CSS 文件。然而，它会导致浏览器在解析 CSS 时额外发起 HTTP 请求，这会增加页面的加载时间，特别是在导入多个文件时，性能影响更为明显。
例如：
@import "styles2.css";
相比之下，使用 标签在 HTML 文件中引入 CSS 文件更为高效，因为浏览器可以并行加载多个 引用的 CSS 文件：
<link rel="stylesheet" href="styles2.css">
这样可以加快 CSS 的加载速度，从而提升页面整体的加载性能。
3.2 慎重使用动画和过渡效果
动画和过渡效果可以为网页增添交互性和趣味性，但过度使用或不合理的使用可能会导致性能问题，特别是在移动设备上。复杂的动画和过渡效果可能会占用大量的 CPU 和 GPU 资源，导致页面卡顿。
例如，一个连续旋转的动画：
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.spinning - element {
animation: spin 2s linear infinite;
}
如果该动画元素在页面上频繁出现，或者动画持续时间过长、帧率过高，就可能对性能产生负面影响。在使用动画和过渡效果时，应尽量简化动画的复杂度，合理设置动画的持续时间和帧率，并考虑使用硬件加速（如 transform 和 opacity 属性）来提升性能。
四、优化 CSS 加载
4.1 内联首屏关键 CSS（Critical CSS）
首屏关键 CSS 是指渲染页面首屏内容所必需的 CSS 样式。将这部分关键 CSS 内联到 HTML 文件中，可以使浏览器在下载 HTML 文件后立即开始渲染首屏内容，减少用户等待的时间，提升用户体验。
例如，对于一个新闻网站，首屏主要包含文章标题、摘要和图片。我们可以通过工具（如 Critical 工具）提取出渲染这些元素所需的关键 CSS，然后将其直接内联到 HTML 文件的 标签内：
<head>
<style>
/* 内联首屏关键CSS */
.article - title {
font - size: 24px;
color: #333;
}
.article - summary {
font - size: 16px;
color: #666;
}
.article - img {
width: 100%;
height: auto;
}
</style>
</head>
同时，将剩余的 CSS 文件通过外部链接异步加载，以避免阻塞页面渲染。这样，用户可以更快地看到首屏内容，而其他样式在后台逐渐加载并应用。
4.2 异步加载 CSS
CSS 默认是阻塞渲染的，即浏览器在下载和解析 CSS 文件之前，不会渲染页面内容。为了避免这种阻塞，可以采用异步加载 CSS 的方式。
有多种方法可以实现 CSS 的异步加载，例如使用 JavaScript 动态创建样式表链接元素并插入到 DOM 中：
const myCSS = document.createElement('link');
myCSS.rel ='stylesheet';
myCSS.href ='styles.css';
document.head.appendChild(myCSS);
或者使用 rel="preload" 属性来异步加载 CSS 文件，同时指定 as="style" 以告知浏览器资源类型：
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
这样，浏览器在加载 HTML 文件的同时，可以异步下载 CSS 文件，不会阻塞页面的渲染，从而提高页面的加载速度。
五、利用 CSS 预处理器和构建工具
5.1 使用 CSS 预处理器（如 Sass、Less）
CSS 预处理器如 Sass 和 Less 为 CSS 开发带来了许多便利，同时也有助于优化 CSS 性能。它们支持变量、混合（Mixin）、嵌套规则等特性，使代码更加模块化和可维护。
以 Sass 为例，使用变量可以方便地管理颜色、字体大小等常用样式值：
$primary - color: #007bff;
$font - size: 16px;
body {
color: $primary - color;
font - size: $font - size;
}
当需要修改主要颜色或字体大小时，只需在变量定义处进行更改，所有引用该变量的地方都会自动更新，避免了在大量 CSS 代码中逐一查找和修改的麻烦。此外，混合（Mixin）可以将一组常用的样式组合成一个可复用的模块，减少代码重复。
5.2 利用构建工具进行代码压缩和合并
构建工具如 Webpack、Gulp 等可以对 CSS 代码进行压缩和合并，进一步优化性能。代码压缩可以去除 CSS 文件中的冗余空白字符、注释和缩短属性名，从而减小文件体积。
例如，使用 UglifyCSS 工具可以将以下 CSS 代码：
/* 这是一段注释 */
body {
margin: 0;
padding: 0;
color: #333;
}
压缩为：
body{margin:0;padding:0;color:#333}
构建工具还可以将多个 CSS 文件合并为一个文件，减少 HTTP 请求次数。例如，Webpack 可以通过配置将多个 CSS 模块打包成一个 CSS 文件，然后在 HTML 中统一引用：
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: ['style - loader', 'css - loader']
}
]
}
};
通过这种方式，不仅可以提高 CSS 的加载速度，还能提升网站的整体性能。
通过以上这些 CSS 性能优化技巧，从精简代码、优化选择器、合理使用 CSS 特性、优化加载方式以及利用工具等多个方面入手，可以显著提升网站的性能。
最后欢迎大家点赞关注加收藏~
