CSS性能优化：让网页加载更快的实用技巧

你有没有遇到过这种情况？打开一个网页，图片慢慢“爬”出来，按钮点半天没反应，页面还时不时卡一下。其实很多时候，问题不在于网速，而是CSS写得太“重”了。别小看几行样式代码，写得不好，整个页面都会变慢。

减少选择器的复杂度

很多人喜欢这么写：

.header nav ul li a:hover { color: red; }

看起来没问题，但浏览器要从右往左解析这个选择器，每一级都要匹配。层级越深，消耗越大。不如直接给链接加个类：

.nav-link { color: #333; }
.nav-link:hover { color: red; }

简单直接，效率高。

避免频繁重排和重绘

你改一个元素的宽高，浏览器可能要重新计算整个页面的布局，这叫重排。哪怕只是改个颜色，也可能触发重绘。这两个操作都很吃性能。

比如动画效果，别用 width、height、top、left 这些属性，它们会引发重排。换成 transform 就聪明多了：

.box {
  transition: transform 0.3s;
}
.box:hover {
  transform: scale(1.1);
}

浏览器可以用GPU加速处理 transform，页面滑溜多了。

合并与压缩CSS文件

一个网站引入七八个CSS文件，每个都要发一次HTTP请求，加载自然慢。开发时可以拆细点方便维护，上线前记得合并压缩。

像 PurgeCSS 这类工具能帮你删掉项目里根本没用到的样式。曾经有个项目，原始CSS有120KB，清理后只剩38KB，用户打开首页快了一倍不止。

善用CSS自定义属性（变量）

如果你的网站支持换肤，或者有很多重复的颜色、间距，用CSS变量能省不少事：

:root {
  --primary-color: #007acc;
  --spacing-sm: 8px;
}

.btn {
  padding: var(--spacing-sm) 16px;
  background: var(--primary-color);
}

改主题时，只需切换一组变量值，不用到处翻替换。

使用 will-change 提示浏览器

如果某个元素即将发生动画，可以提前告诉浏览器：“我要变啦，准备一下”。这样能避免临时开销：

.slide-in {
  will-change: transform;
  transition: transform 0.4s;
}

注意别滥用，只在真正需要的时候加，否则反而拖累性能。

考虑用现代布局替代老方法

还在用 float 做栅格布局？不仅难维护，还会带来各种清除浮动的问题。换成 Flexbox 或 Grid，代码更简洁，渲染也更高效。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

这一行就搞定响应式布局，浏览器处理起来也轻松。

CSS写得好，页面才能跑得快。别等到用户抱怨卡顿才回头改，从第一行样式开始就注意性能，体验自然差不了。