你有没有遇到过这样的情况：页面HTML和JS都加载完了，但按钮颜色迟迟不生效，动画卡顿得像老式投影仪？十有八九，是CSS在后台悄悄“卡壳”了。很多人以为性能优化只盯着JS和图片，其实CSS同样会成为瓶颈——尤其在数据备份类工具页里，用户频繁切换视图、展开折叠列表、实时预览备份状态时，样式重排重绘一多，体验立马打折。
删掉那些“看不见”的规则
项目迭代久了，CSS文件里常混着一堆废弃选择器：比如曾经用过的.btn-primary-old，或者为某个已下线功能写的动画关键帧。这些代码不渲染，但浏览器仍要解析、匹配、存储。打开DevTools的Coverage面板（Ctrl+Shift+P → “Coverage”），刷新页面，一眼就能看出哪些CSS行从未执行过。删掉它们，体积小了，解析快了，连带@import链也更清爽。
少用通配符和深层嵌套
写* { box-sizing: border-box; }很省事，但它强制浏览器对每个节点都做一次样式计算。换成只作用于容器：
<div class="backup-list">
<div class="item">...</div>
</div>然后针对性地写：
.backup-list, .backup-list > * {
box-sizing: border-box;
}同理，避免.page .section .content .list .item:hover这种五层嵌套——不仅难维护，浏览器匹配时还得从右往左逐级回溯，效率直线下降。
动画别硬刚reflow
数据备份页里常见的“进度条增长”、“列表项淡入”，如果用width或height驱动，每次变化都会触发重排。改用transform和opacity，让浏览器走合成层（Compositor Thread）：“
.progress-fill {
/* 别这样 */
/* width: 60%; */
/* 这样更轻快 */
transform: scaleX(0.6);
transform-origin: left center;
}顺便加一句will-change: transform;（慎用，仅对高频动画元素），告诉浏览器提前准备图层。
媒体查询别堆在最后
把所有@media (max-width: 768px) { ... }一股脑塞在CSS文件末尾？浏览器解析时仍得遍历全部规则才能确定当前是否匹配。建议按断点分块内联，或拆成desktop.css、mobile.css，用media属性异步加载：
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">
<link rel="stylesheet" href="desktop.css" media="(min-width: 769px)">这样小屏设备根本不会下载桌面端样式，备份页在手机上打开更快一步。
字体加载别堵住渲染
自定义字体（比如用于备份状态徽标的iconfont）若没处理好，会导致文本闪动甚至长时间空白。别只靠@font-face，加上font-display: swap;：
@font-face {
font-family: 'BackupIcons';
src: url('icons.woff2') format('woff2');
font-display: swap;
}字体加载期间先用系统默认字体撑开布局，图标就位后再平滑替换，用户不会觉得页面“卡住”。