Frontend►CSS

010-优化CSS性能

优化CSS性能详解

CSS性能优化是提升网页加载速度和渲染效率的重要环节。以下是全面的CSS性能优化策略：

1. 减少CSS文件大小

压缩CSS

  • 使用工具如CSSNano、CleanCSS、UglifyCSS或在线工具压缩CSS
  • Webpack等构建工具中配置css-minimizer-webpack-plugin
  • 移除注释、空白和不必要的分号

精简CSS代码

  • 删除未使用的CSS（使用PurgeCSS、UnCSS等工具）
  • 合并重复的样式规则
  • 使用简写属性（如margin: 10px 20px代替分开设置）

2. 优化CSS交付方式

关键CSS内联

  • 提取首屏关键CSS内联到HTML中
  • 使用工具如Critical、Penthouse提取关键CSS

异步加载非关键CSS

1
2
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

媒体查询优化

1
2
<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

3. 选择器性能优化

避免过度复杂的选择器

1
2
3
4
5
/* 差 - 过于复杂 */
body.home div.header ul.nav li a {}

/* 好 */
.nav-link {}

避免通用选择器

1
2
3
4
5
/* 差 - 性能低下 */
[hidden="true"] { ... }

/* 好 */
.hidden { ... }

避免深层嵌套

1
2
3
4
5
/* 差 */
div > ul > li > a {}

/* 好 */
.menu-link {}

4. 布局与绘制优化

减少重排和重绘

  • 使用transform和opacity实现动画（它们只触发合成阶段）
  • 避免频繁修改布局属性（如width、height、top等）

使用will-change提示浏览器

1
2
3
.animated-element {
  will-change: transform, opacity;
}

使用contain属性

1
2
3
.widget {
  contain: layout style paint;
}

5. 现代CSS技术应用

使用CSS变量

1
2
3
4
5
6
:root {
  --primary-color: #3498db;
}
.button {
  background-color: var(--primary-color);
}

使用Flexbox和Grid布局

  • 这些现代布局方式比传统浮动布局更高效

使用CSS精灵图

1
2
3
4
.icon {
  background-image: url('sprites.png');
  background-position: -20px -30px;
}

6. 其他优化技巧

减少@import使用

  • @import会阻止并行加载，改用<link>标签

合理使用字体

  • 限制字体变体数量
  • 使用font-display: swap确保文本可见性

减少昂贵的CSS属性

  • 避免过度使用box-shadow、border-radius、filter等

7. 工具与测试

性能分析工具

  • Chrome DevTools的Performance面板
  • CSS Stats分析CSS复杂度
  • Lighthouse性能评分

自动化优化

  • 在构建流程中集成PostCSS及其插件
  • 使用PurgeCSS移除未使用的CSS

通过综合应用这些优化策略，可以显著提升CSS性能，改善页面加载速度和用户体验。