CSS 性能优化概述

CSS 性能优化分为三个阶段：加载优化、解析优化、渲染优化。

优化全景图

Bash

┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│   加载优化   │ → │   解析优化   │ → │   渲染优化   │
└─────────────┘    └─────────────┘    └─────────────┘
      │                  │                  │
      ▼                  ▼                  ▼
  减少文件体积      选择器优化         减少重排重绘
  压缩合并          减少嵌套层级       GPU 加速
  异步加载          避免通配符         合成层优化

加载优化

文件压缩

HTML

# 使用构建工具压缩
cssnano、clean-css、terser

合并文件

HTML

<!-- 差：多个请求 -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="components.css">

<!-- 好：合并为一个 -->
<link rel="stylesheet" href="bundle.css">

异步加载非关键 CSS

CSS

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

避免阻塞渲染

内联关键 CSS
异步加载非关键 CSS
避免使用 @import

解析优化

选择器效率

选择器	效率	示例
ID 选择器	最高	`#id`
类选择器	高	`.class`
标签选择器	中	`div`
属性选择器	低	`[type="text"]`
通配符	最低	`*`

减少嵌套层级

CSS

/* 差：深层嵌套 */
.header .nav .menu .item .link { }

/* 好：扁平化 */
.nav-link { }

避免昂贵选择器

JavaScript

/* 差：复杂属性选择器 */
[class^="nav-"][class*="-item"] { }

/* 好：直接使用类名 */
.nav-item { }

渲染优化

减少 DOM 操作

CSS

// 差：多次操作
element.style.width = '100px';
element.style.height = '100px';
element.style.margin = '10px';

// 好：一次性修改
element.style.cssText = 'width:100px;height:100px;margin:10px;';

// 或使用 class
element.classList.add('active');

使用 GPU 加速属性

CSS

/* 好：使用 transform、opacity 做动画 */
.animated {
  transition: transform 0.3s, opacity 0.3s;
}

/* 避免：触发重排的属性 */
.avoid {
  animation: resize 0.3s;  /* width/height 变化 */
}

合理使用 will-change

text

/* 仅对即将动画的元素设置 */
.card:hover {
  will-change: transform;
}

性能检测工具

工具	用途
Chrome DevTools	分析渲染性能、CSS 覆盖率
Lighthouse	综合性能评分
WebPageTest	真实网络环境测试
CSS Stats	CSS 统计分析

关键指标

FCP（First Contentful Paint）：首次内容绘制
LCP（Largest Contentful Paint）：最大内容绘制
TTI（Time to Interactive）：可交互时间

优化目标：FCP < 1.8s，LCP < 2.5s

要点总结

加载优化：压缩、合并、异步加载、内联关键 CSS
解析优化：简化选择器、减少嵌套、避免昂贵选择器
渲染优化：减少 DOM 操作、使用 GPU 加速、控制重排重绘
使用工具检测性能，关注核心指标