你平时有哪些 CSS 性能优化的方法？

常见的 CSS 性能优化手段主要有以下几类：

1. 加载与解析层面

  • 内联首屏关键 CSS（Critical CSS），减少首屏渲染阻塞。
  • 异步加载非关键 CSS：如 <link rel="preload" as="style"> + onload，或动态创建 <style>。
  • 压缩 CSS、合并文件，减少请求体积与数量。
  • 通过 PurgeCSS / UnCSS 等工具去除无用 CSS。

2. 选择器与规则层面

  • 避免过深的嵌套和复杂选择器（尤其避免 * 通配符选择器），选择器匹配是从右向左进行的。
  • 减少使用属性选择器（如 [attr]），尤其是在大列表上。
  • 减少使用昂贵的属性，如 box-shadow、filter、border-radius 等大面积使用时。

3. 渲染与重排重绘

  • 减少引起回流/重绘的属性频繁修改，批量修改或放在 requestAnimationFrame 中。
  • 复杂动画使用 transform / opacity，开启 GPU 合成层。
  • 避免使用 @import，它会阻塞并行加载，且顺序在所有 link 之后。

4. 其它

  • 合理使用 CSS 继承，减少重复声明。
  • 抽离公共样式（CSS 变量、原子化类等）以减小总体积。
  • 图标合并为雪碧图或使用 SVG / iconfont，避免大量小图请求。

补充：实际项目中通常会组合使用，先压缩、再按需加载、最后做关键 CSS 内联 + 异步兜底。