想让网页秒开？这些 CSS 优化方法帮你搞定

我正在开发 DocFlow，它是一个完整的 AI 全栈协同文档平台。该项目融合了多个技术栈，包括基于 Tiptap 的富文本编辑器、NestJs 后端服务、AI 集成功能和实时协作。在开发过程中，我积累了丰富的实战经验，涵盖了 Tiptap 的深度定制、性能优化和协作功能的实现等核心难点。

如果你对 AI 全栈开发、Tiptap 富文本编辑器定制或 DocFlow 项目的完整技术方案感兴趣，欢迎加我微信 yunmz777 进行私聊咨询，获取详细的技术分享和最佳实践。

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

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

减少 css 文件大小

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

使用 cssnano 压缩 CSS 文件：

js 复制代码

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：

js 复制代码

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

scss 复制代码

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

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

嵌套

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

scss 复制代码

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

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

混合宏（Mixins）

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

scss 复制代码

@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）

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

scss 复制代码

%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 中进行数学运算，这对于动态计算宽度、高度、间距等非常有用。

scss 复制代码

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

模块化

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

scss 复制代码

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

条件语句和循环

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

scss 复制代码

@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;
  }
}

自动前缀

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

scss 复制代码

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

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

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

优化选择器

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

低效选择器：

css 复制代码

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

高效选择器：

css 复制代码

.item-first {
  color: red;
}

减少重绘和重排

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

js 复制代码

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

延迟加载和异步加载

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

异步加载 CSS：

html 复制代码

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

使用字体优化

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

css 复制代码

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

浏览器缓存

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

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

apache 复制代码

<FilesMatch "\.(css|js)$">
  Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

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

html 复制代码

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

总结

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