​CSS 性能优化是前端开发中的重要一环，目的是提高页面加载速度和渲染性能，提供更好的用户体验。

接下来我们将讲解一些常见的案例。

减少 css 文件大小

压缩 CSS 文件可以通过移除空白字符、注释和冗余代码来减少文件大小，从而提高加载速度。常用工具有 cssnano 和 clean-css。

使用 cssnano 压缩 CSS 文件：

const cssnano = require("cssnano");
const postcss = require("postcss");
const fs = require("fs");


fs.readFile("./style.css", (err, css) => {
  postcss([cssnano])
    .process(css, { from: "style.css", to: "styles.min.css" })
    .then((result) => {
      fs.writeFile("styles.min.css", result.css, () => true);
    });
});

最终输出结果如下图所示：

 

style.css 文件会被压缩到 styles.min.css。

删除未使用的 CSS

通过工具（如 PurgeCSS、UnCSS）扫描 HTML 和 JS 文件，删除未使用的 CSS 规则，减少不必要的样式，提高性能。

使用 PurgeCSS 删除未使用的 CSS：

const PurgeCSS = require("purgecss").PurgeCSS;
const fs = require("fs");


new PurgeCSS()
  .purge({
    content: ["*.html"],
    css: ["styles.css"],
  })
  .then((result) => {
    // 保存优化后的 CSS 文件
    fs.writeFile("./styles.purged.css", result[0].css, () => true);
  });

代码执行完成之后，只有在使用的 css 规则才会被应用，其余的都会被删除掉，如下图所示：

使用 CSS 预处理器

使用 CSS 预处理器（如 Sass、Less、Stylus 等）可以为你的开发工作带来许多好处。以下是一些主要的优势和详细的解释：

变量

在 CSS 预处理器中，你可以定义变量来存储重复使用的值（如颜色、字体大小、间距等）。这使得你的代码更加简洁和易于维护。

$primary-color: #3498db;
$font-size: 16px;


body {
  font-size: $font-size;
  color: $primary-color;
}

嵌套

预处理器允许你嵌套 CSS 规则，这使得你的代码结构更加清晰，尤其是在处理复杂的选择器层次时。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;


    li {
      display: inline-block;
      a {
        text-decoration: none;
        color: $primary-color;
      }
    }
  }
}

混合宏（Mixins）

混合宏允许你定义一组样式，然后在其他地方重复使用。这对于实现可重用的响应式设计模式或其他复杂的样式非常有用。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}


.button {
  @include border-radius(5px);
}

继承（Extend/Inherit）

继承允许一个选择器继承另一个选择器的样式，从而减少代码重复，提高样式的可维护性。

%button-styles {
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: $primary-color;
}


.button {
  @extend %button-styles;
}


.alert-button {
  @extend %button-styles;
  background-color: red;
}

运算

你可以在 CSS 中进行数学运算，这对于动态计算宽度、高度、间距等非常有用。

.container {
  width: 100% - 20px; // 计算结果
  padding: 10px + 5px; // 计算结果
}

模块化

预处理器通常支持将 CSS 分割成多个文件，然后在一个主文件中导入这些文件。这使得你的 CSS 代码更具可维护性和组织性。

// 在 main.scss 文件中
@import "variables";
@import "mixins";
@import "header";
@import "footer";

条件语句和循环

预处理器支持使用条件语句和循环，从而可以在 CSS 中实现更复杂的逻辑和模式。

@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100% / 3 * $i;
  }
}


@mixin responsive($device) {
  @if $device == "mobile" {
    @media (max-width: 600px) {
      @content;
    }
  } @else if $device == "tablet" {
    @media (max-width: 800px) {
      @content;
    }
  }
}


.container {
  @include responsive("mobile") {
    background-color: blue;
  }
  @include responsive("tablet") {
    background-color: green;
  }
}

自动前缀

一些预处理器插件可以自动添加浏览器前缀，这样你就不需要手动添加各种浏览器前缀。

// Sass 文件
.box {
  display: flex;
}


// 编译后的 CSS 文件（使用 Autoprefixer 处理）
.box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

使用 CSS 预处理器可以极大地提高开发效率和代码可维护性。通过引入变量、嵌套、混合宏、继承、运算、模块化、条件语句和循环等高级功能，预处理器使得编写和管理复杂的 CSS 变得更加轻松和高效。

优化选择器

避免使用低效选择器，减少选择器层级嵌套，使用更高效的类选择器。

低效选择器：

div > ul > li:first-child {
  color: red;
}

高效选择器：

.item-first {
  color: red;
}

减少重绘和重排

频繁更改 DOM 和样式会导致重绘和重排，影响性能。尽量批量更新样式。

element.style.cssText = "background-color: blue; width: 100px; height: 100px;";

延迟加载和异步加载

延迟加载非关键 CSS 文件，提高关键渲染路径的性能。

异步加载 CSS：

<link
  rel="preload"
  href="styles.css"
  as="style"
  onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript><link rel="stylesheet" href="styles.css" /></noscript>

使用字体优化

减少字体文件大小，使用适当的字体显示策略。

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
  font-display: swap;
}

浏览器缓存

通过设置缓存头和版本控制，提高 CSS 文件的加载速度。

在服务器上配置适当的缓存头，允许浏览器缓存 CSS 文件。例如，使用 Apache 服务器，可以在 .htaccess 文件中添加以下内容：

  Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

通过文件名中包含版本号（如 style.v1.css）来控制缓存，确保更新后的 CSS 文件被重新加载。

<link rel="stylesheet" href="styles.v1.css" />

总结

通过以上这些优化方法和工具，我们可以显著提升 css 的性能，改善网页的加载和渲染速度，提供更流畅的用户体验。

参考文章：原文链接​