CSS 性能优化有哪些方法？

1. 内联首屏关键 CSS（Critical CSS）

内联 CSS 能够使浏览器开始页面渲染的时间提前，只将渲染首屏内容所需的关键 CSS 内联到 HTML 中。

2. 异步加载 CSS

非首屏关键的 CSS 建议异步加载，避免阻塞首屏渲染。常用方案：

<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">

3. 文件压缩

通过构建工具（cssnano、csso）去除空格、注释、合并长属性，减小文件体积。

4. 去除无用 CSS

用 PurgeCSS / UnCSS / coverage 工具扫描源码，去除未被使用的 CSS 规则。

5. 其它常见优化点

  • 避免使用通配符 *、层级过深的选择器；
  • 减少昂贵属性（box-shadow、filter、border-radius、backdrop-filter）的使用范围；
  • 动画使用 transform/opacity，开启 GPU 合成；
  • 合并多个图标为雪碧图或 SVG sprite；
  • 使用 CSS 变量、原子化 CSS（如 Tailwind）减少重复声明。

补充：建议按"加载解析 → 选择器 → 渲染属性 → 工具压缩"的顺序系统化优化，而不是零散改 CSS。