我正在开发 DocFlow，它是一个完整的 AI 全栈协同文档平台。该项目融合了多个技术栈，包括基于
Tiptap的富文本编辑器、NestJs后端服务、AI集成功能和实时协作。在开发过程中，我积累了丰富的实战经验，涵盖了Tiptap的深度定制、性能优化和协作功能的实现等核心难点。
如果你对 AI 全栈开发、Tiptap 富文本编辑器定制或 DocFlow 项目的完整技术方案感兴趣，欢迎加我微信 yunmz777 进行私聊咨询，获取详细的技术分享和最佳实践。
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 文件中添加以下内容：
<FilesMatch "\.(css|js)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
通过文件名中包含版本号（如 style.v1.css）来控制缓存，确保更新后的 CSS 文件被重新加载。
<link rel="stylesheet" href="styles.v1.css" />
总结
通过以上这些优化方法和工具，我们可以显著提升 css 的性能，改善网页的加载和渲染速度，提供更流畅的用户体验。
