如果要做优化，CSS 提高性能的方法有哪些？

问题解析

CSS 性能优化直接影响页面加载速度和渲染流畅度。面试考察这个问题，是想要了解候选人是否具备性能意识，以及能否从多个维度思考和解决性能问题。

性能优化维度

┌─────────────────────────────────────────┐
│           CSS 性能优化                   │
├─────────────┬─────────────┬─────────────┤
│   加载优化   │   渲染优化   │   文件优化   │
├─────────────┼─────────────┼─────────────┤
│ • 内联关键CSS│ • 减少重排   │ • 压缩      │
│ • 异步加载   │ • 使用 transform│ • 合并   │
│ • 资源预加载 │ • 使用 GPU   │ • 去重      │
│ • CDN       │ • will-change│ • Tree Shaking│
└─────────────┴─────────────┴─────────────┘

一、加载优化

1. 内联关键 CSS（Critical CSS）

将首屏渲染必需的 CSS 直接内联到 HTML 中，避免阻塞渲染。

<head>
  <style>
    /* 关键 CSS：首屏可见内容的样式 */
    body { margin: 0; font-family: Arial; }
    .header { background: #333; height: 60px; }
    .hero { background: #f0f0f0; padding: 40px; }
    /* ... */
  </style>

  <!-- 非关键 CSS 异步加载 -->
  <link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="non-critical.css"></noscript>
</head>

工具推荐：Critical、Penthouse

2. 异步加载非关键 CSS

<!-- 方法1：media 切换 -->
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

<!-- 方法2：rel 预加载 -->
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">

3. 资源提示

<!-- DNS 预解析 -->
<link rel="dns-prefetch" href="//cdn.example.com">

<!-- 预连接 -->
<link rel="preconnect" href="//fonts.googleapis.com">

<!-- 预加载关键资源 -->
<link rel="preload" href="critical.css" as="style">

二、渲染优化

1. 减少回流（Reflow）

/* ❌ 触发回流 */
.animating {
  width: 100px;
  height: 100px;
  left: 0;
  top: 0;
}

/* ✅ 使用 transform（只触发合成） */
.animating {
  transform: translate(0, 0);
}

安全属性（只触发重绘或合成）：

transform
opacity
filter

2. 使用 GPU 加速

.gpu-accelerated {
  /* 提示浏览器创建独立图层 */
  will-change: transform, opacity;

  /* 或强制 GPU 加速 */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 动画结束后移除 will-change */
.animation-complete {
  will-change: auto;
}

3. 减少选择器复杂度

/* ❌ 复杂选择器，从右向左匹配效率低 */
.header .nav ul li a span {
  color: red;
}

/* ✅ 简单选择器 */
.nav-link-text {
  color: red;
}

选择器性能排序（快 → 慢）：

ID (#id) > 类 (.class) > 标签 (div) > 相邻 (+) > 子代 (>) >
后代 ( ) > 通配符 (*) > 属性 ([attr]) > 伪类 (:hover)

4. 避免 @import

/* ❌ 串行加载，阻塞渲染 */
@import url('reset.css');
@import url('base.css');
@import url('components.css');

/* ✅ 并行加载，或使用打包工具合并 */

5. 使用 contain 限制影响范围

.widget {
  /* 隔离样式、布局、绘制 */
  contain: layout style paint;

  /* 或严格隔离 */
  contain: strict;
}

三、文件优化

1. 压缩 CSS

# 使用 cssnano、clean-css 等工具
npx cssnano input.css output.css

压缩效果：

移除注释和空白
缩短颜色值（#ffffff → #fff）
移除无用的分号
合并规则

2. 删除未使用 CSS（Tree Shaking）

# PurgeCSS - 根据 HTML/JS 内容删除未使用 CSS
npm install @fullhuman/postcss-purgecss

// postcss.config.js
module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: ['./src/**/*.html', './src/**/*.js'],
    }),
  ],
};

3. 避免重复代码

/* ❌ 重复定义 */
.btn-primary { background: #1890ff; color: white; padding: 8px 16px; }
.btn-success { background: #52c41a; color: white; padding: 8px 16px; }

/* ✅ 提取公共样式 */
.btn {
  padding: 8px 16px;
  color: white;
}
.btn-primary { background: #1890ff; }
.btn-success { background: #52c41a; }

四、其他优化技巧

1. 图片优化

/* 使用 CSS 渐变替代小图片 */
.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 使用 CSS 图形替代图标 */
.arrow::after {
  content: '';
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
}

2. 字体优化

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');  /* 优先 WOFF2 */
  font-display: swap;  /* 使用备用字体立即显示，加载后替换 */
}

body {
  font-family: 'CustomFont', Arial, sans-serif;
}

3. 响应式图片

.responsive-img {
  max-width: 100%;
  height: auto;
}

4. 硬件加速的谨慎使用

/* 不要滥用 GPU 加速 */
/* ❌ 太多图层会消耗大量内存 */
* {
  transform: translateZ(0);
}

/* ✅ 只在需要时启用 */
.animated-element {
  will-change: transform;
}

5. 使用 CSS 变量减少代码量

:root {
  --color-primary: #1890ff;
  --spacing-unit: 8px;
}

/* 多处使用，修改一处即可 */
.btn { background: var(--color-primary); }
.link { color: var(--color-primary); }
.card { padding: calc(var(--spacing-unit) * 2); }

性能检测工具

1. Chrome DevTools

Performance：录制并分析渲染性能
Lighthouse：生成性能报告
Coverage：检测未使用的 CSS

2. 在线工具

PageSpeed Insights：Google 性能分析
WebPageTest：多地点性能测试
GTmetrix：综合性能报告

3. 构建工具集成

// webpack 配置示例
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin(),  // 压缩 CSS
    ],
  },
  plugins: [
    new PurgeCSSPlugin({  // 移除未使用 CSS
      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
    }),
  ],
};

性能检查清单

加载阶段

渲染阶段

动画使用 transform 和 opacity
合理使用 will-change
减少复杂选择器
避免 @import

文件大小

移除未使用 CSS
合并重复代码
使用 CSS 变量

面试要点

能够说出 CSS 性能优化的几个主要维度
理解关键 CSS 和异步加载的原理
知道哪些 CSS 属性会触发回流，哪些是安全的
了解 GPU 加速的使用场景和注意事项
能够说出至少 3 个 CSS 性能检测工具
理解 PurgeCSS 等工具的工作原理

核心原则：

减少 CSS 体积（压缩、去未使用代码）
优化加载顺序（关键 CSS 内联）
减少渲染阻塞（异步加载）
优化渲染过程（减少回流、使用 GPU 加速）