一、引言

当涉及到网站的性能优化时，CSS 的优化是一个非常重要的方面。如果你的 CSS 太复杂，那么你的网站可能会像一个慢吞吞的乌龟一样缓慢地加载和渲染，影响用户的留存、网站的转化率以及网站的体验和传播等，所以对于css优化还是非常需要的，本文将介绍一些 CSS 性能优化的技巧，帮助你在编写 CSS 代码时提高性能。

二、CSS加载性能优化

1. 提取公共的 CSS 文件

如果使用webpack进行项目打包，在打包阶段可以使用mini-css-extract-plugin提取公共CSS文件，便于缓存以及减少css请求次数。

2. 避免使用 @import

使用@import会阻塞浏览器的并行下载，导致加载速度变慢
多个@import会导致下载顺序紊乱

3. 压缩 CSS 文件

压缩 CSS 文件可以减小文件大小，从而加快加载速度。比如可以用optimize-css-assets-webpack-plugin配合mini-css-extract-plugin使用来优化和压缩 CSS 文件。

4. 使用浏览器缓存

可以使用浏览器缓存来缓存 CSS 文件，从而在页面加载时加快速度。可以设置适当的缓存时间来确保文件在必要时能够更新。

5. 使用 CDN 加速加载

使用 CDN（内容分发网络） 可以将 CSS 文件分发到多个服务器上，从而加快加载速度，并减少服务器的负载

6. 使用CSS Sprite

CSS Sprite技术就是我们常说的雪碧图，通过将多张小图标拼接成一张大图，能有效的减少HTTP请求数量以达到加速显示内容的技术。

7. 去除无用CSS

打包时利用一些工具去除没有用到的CSS。比如在 Webpack 中，可以使用 PurifyCSSPlugin 插件来去除没有用到的 CSS。

PurifyCSSPlugin 插件可以分析你的代码，找出哪些 CSS 样式被实际使用了，然后将未使用的 CSS 样式从最终的构建文件中删除。这可以帮助减小构建文件的大小，从而提高页面的加载速度。以下是使用 PurifyCSSPlugin 插件的基本步骤：

安装 purify-css 和 purifycss-webpack：

npm install purify-css purifycss-webpack --save-dev

在 Webpack 配置文件中引入 PurifyCSSPlugin 插件：

const PurifyCSSPlugin = require('purifycss-webpack');

在 Webpack 配置文件中添加 PurifyCSSPlugin 插件：

plugins: [
  new PurifyCSSPlugin({
    paths: glob.sync([
      // 匹配需要进行 CSS 去重的文件
      path.join(__dirname, 'src/*.html'),
      path.join(__dirname, 'src/*.js')
    ])
  })
]

在上面的代码中，paths 参数用于指定需要进行 CSS 去重的文件，可以使用 glob 库的通配符来匹配多个文件。在这个例子中，我们使用了 src/*.html 和 src/*.js 来匹配所有的 HTML 文件和 JavaScript 文件。

需要注意的是，PurifyCSSPlugin 插件会在构建过程中对代码进行分析，因此可能会对构建速度产生一定的影响。如果你的代码量比较大，建议使用该插件时谨慎选择需要分析的文件。

三、CSS 选择器性能优化

1. 避免使用通配符选择器

通配符选择器可以匹配任何元素，但是这会导致浏览器需要遍历整个文档树来查找匹配的元素，从而降低性能。

2. 合理使用后代选择器

后代选择器可以匹配任何子元素，但是这会导致浏览器需要遍历整个文档树来查找匹配的元素，从而降低性能，需要合理使用。

3. 避免使用属性选择器

属性选择器可以根据元素的属性来匹配元素，但是这会导致浏览器需要遍历整个文档树来查找匹配的元素，从而降低性能。

4. 避免使用 :not 伪类选择器

:not 伪类选择器可以排除某些元素，但是这会导致浏览器需要遍历整个文档树来查找匹配的元素，从而降低性能。

5. 避免使用 :nth-child() 伪类选择器

:nth-child() 伪类选择器可以匹配某些子元素，但是这会导致浏览器需要遍历整个文档树来查找匹配的元素，从而降低性能。

四、CSS 属性性能优化

1. 避免使用过于复杂的属性

过于复杂的属性会增加浏览器的渲染负担，从而降低性能。应该尽量使用简单的属性来实现需要的样式效果，比如下面这些属性：

box-shadow：box-shadow 属性可以实现盒子的阴影效果，但是它会增加浏览器的计算和渲染成本。如果要实现一个简单的边框效果，可以使用 border 属性来替代。

/* 不推荐使用 */
div {
  box-shadow: 2px 2px 2px #888;
}

/* 推荐使用 */
div {
  border: 1px solid #888;
}

filter：filter 属性可以实现图像的滤镜效果，但是它会增加浏览器的计算和渲染成本。如果要实现一个简单的颜色变换效果，可以使用 background-color 属性来替代。

/* 不推荐使用 */
div {
  filter: grayscale(50%);
}

/* 推荐使用 */
div {
  background-color: #ccc;
}

transform：transform 属性可以实现元素的旋转、缩放、平移等变换效果，但是它会增加浏览器的计算和渲染成本。如果要实现一个简单的元素动画效果，可以使用 transition 属性来替代。

/* 不推荐使用 */
div {
  transform: rotate(30deg) scale(1.2) translate(10px, 10px);
}

/* 推荐使用 */
div {
  transition: all 0.3s ease-in-out;
}

div:hover {
  transform: translate(10px, 10px);
}

不过需要注意的是，这些替代方案可能会有一些局限性，无法完全取代原来的属性。因此，在使用这些替代方案时，需要根据具体的需求和情况进行选择。

2. 避免使用不必要的属性

不必要的属性会增加 CSS 文件的大小，从而降低加载速度。应该尽量避免使用不必要的属性。

3. 避免使用 !important

!important 会覆盖其他样式，从而增加渲染时间。应该尽量避免使用 !important。

4. 避免使用 inline 样式

inline 样式会增加 HTML 文件的大小，从而降低加载速度。应该尽量避免使用 inline 样式。

五、CSS 动画性能优化

1. 使用 transform 和 opacity 属性来进行动画

使用 transform 和 opacity 属性可以减少浏览器的渲染负担，从而提高性能。

2. 避免使用过于复杂的动画效果

过于复杂的动画效果会增加浏览器的渲染负担，从而降低性能。应该尽量使用简单的动画效果。

3. 在动画中使用 will-change 属性

will-change 属性可以告诉浏览器哪些属性将要被改变，从而提前进行优化，减少渲染负担。

4. 使用 requestAnimationFrame() 函数来优化动画

requestAnimationFrame() 函数可以在浏览器下一次渲染之前执行代码，从而减少渲染负担，提高性能。

六、总结

本文介绍了总共20个 CSS 性能优化的技巧，包括CSS 加载性能优化、CSS 选择器性能优化、CSS 属性性能优化和CSS 动画性能优化等方向。通过优化 CSS性能，可以提高网站的性能和用户体验。当然，还有其他一些CSS优化技巧，欢迎大家一起来讨论！

20个CSS性能优化技巧，每个前端都需要知道