知识库

Appearance

Return to top
On this page

CSS 性能优化

CSS 性能优化是提高网页加载速度和渲染效率的重要手段。

概述

CSS 性能优化涉及减少文件大小、优化选择器效率、提高渲染性能等多个方面。

选择器性能

选择器效率等级

css
/* S1: ID 选择器 - 最快 */
#header { color: red; }

/* S2: 类选择器 - 快 */
.nav-item { color: blue; }

/* S3: 标签选择器 - 中等 */
div { margin: 0; }

/* S4: 相邻兄弟选择器 - 慢 */
h1 + p { margin-top: 0; }

/* S5: 通用兄弟选择器 - 很慢 */
h1 ~ p { color: gray; }

/* S6: 后代选择器 - 慢 */
.content p { line-height: 1.5; }

/* S7: 通配符选择器 - 最慢 */
* { margin: 0; padding: 0; }

优化选择器

css
/* 不推荐：复杂的选择器 */
ul.navigation li a:hover span.label { color: red; }

/* 推荐：简化的选择器 */
.nav-link:hover .label { color: red; }

/* 避免标签前缀 */
/* 不推荐 */
div.header { }
ul.nav-list li.nav-item { }

/* 推荐 */
.header { }
.nav-item { }

避免过度特异性

css
/* 不推荐：过度特异性 */
body div.header nav ul li a { color: blue; }

/* 推荐：简洁特异性 */
.nav-link { color: blue; }

CSS 文件优化

压缩和合并

css
/* 原始CSS */
.header {
  background-color: #ffffff;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}

/* 压缩后 */
.header{background-color:#fff;padding:20px 0;border-bottom:1px solid #e0e0e0}

关键CSS内联

html
<!DOCTYPE html>
<html>
<head>
  <!-- 内联关键CSS -->
  <style>
    .header { height: 60px; background: #fff; }
    .nav { display: flex; }
    /* 其他首屏必需的样式 */
  </style>
  <!-- 异步加载非关键CSS -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
</html>

渲染性能

避免强制同步布局

css
/* 不推荐：触发重排 */
.bad-performance {
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  /* 这些属性会触发重排 */
}

/* 推荐：使用不会触发重排的属性 */
.good-performance {
  transform: translateX(100px); /* 合成属性 */
  opacity: 0.8; /* 合成属性 */
  will-change: transform; /* 提示浏览器优化 */
}

使用 transform 和 opacity

css
/* 推荐：使用 transform 和 opacity 实现动画 */
.smooth-animation {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.smooth-animation:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

/* 避免：使用会触发重排的属性 */
.bad-animation {
  transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease;
}

.bad-animation:hover {
  width: 120px;
  height: 120px;
  margin: 20px;
}

启用硬件加速

css
/* 使用 will-change 提示浏览器 */
.animate-element {
  will-change: transform;
}

/* 使用 transform3d 触发硬件加速 */
.hardware-accelerated {
  transform: translateZ(0); /* 或 translate3d(0,0,0) */
}

/* 动画完成后重置 */
.animate-element.animation-complete {
  will-change: auto;
}

CSS 属性性能

高性能属性

css
/* 高性能属性（合成层） */
.high-performance {
  transform: translateX(100px);
  opacity: 0.5;
  filter: blur(5px);
  will-change: transform;
}

/* 低性能属性（可能触发重排重绘） */
.low-performance {
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  top: 10px;
  left: 10px;
}

优化动画性能

css
/* 使用 animation 替代 JavaScript 动画 */
.performance-animation {
  animation: slideIn 0.3s ease-out;
  /* 浏览器会在单独的合成线程中处理 */
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 优化关键帧动画 */
.optimized-animation {
  transform: translate3d(0, 0, 0); /* 硬件加速 */
  backface-visibility: hidden; /* 防止闪烁 */
}

层次和复合

创建合成层

css
/* 为需要动画的元素创建独立的合成层 */
.composited-layer {
  will-change: transform;
  transform: translateZ(0);
  /* 或使用 */
  transform: translate3d(0, 0, 0);
}

/* 合理使用层 */
.carousel-item,
.modal,
.dropdown {
  transform: translateZ(0);
  will-change: transform;
}

避免层爆炸

css
/* 避免为过多元素创建合成层 */
/* 不推荐 */
div {
  transform: translateZ(0); /* 为所有div创建层 */
}

/* 推荐：只为需要的元素创建层 */
.animate-element {
  transform: translateZ(0);
}

字体性能

优化字体加载

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

/* 预加载关键字体 */
/* 在HTML head中 */
/* <link rel="preconnect" href="https://fonts.googleapis.com"> */
/* <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> */
/* <link href="..." rel="stylesheet"> */

字体加载策略

css
/* 定义字体族回退 */
.font-fallback {
  font-family: 'CustomFont', -apple-system, BlinkMacSystemFont, 
               'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
               'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 使用系统字体 */
.system-font {
  font-family: system-ui, -apple-system, sans-serif;
}

图片和资源优化

CSS 图片优化

css
/* 优化背景图片 */
.optimized-bg {
  background-image: url('image.webp'); /* 现代格式 */
  background-size: cover;
  background-position: center;
}

/* 渐进增强 */
.bg-fallback {
  background-image: url('image.jpg'); /* 回退 */
}

@supports (background-image: url('image.webp')) {
  .bg-fallback {
    background-image: url('image.webp'); /* 现代格式 */
  }
}

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

CSS 架构

组织 CSS 结构

css
/* 使用 ITCSS (Inverted Triangle CSS) 结构 */
/* settings: 配置变量 */
/* tools: 混合宏和函数 */
/* generic: 重置和标准化 */
/* elements: 基础HTML元素 */
/* objects: 抽象结构 */
/* components: 具体组件 */
/* utilities: 工具类 */

/* 或使用 BEM 方法论 */
.card { }
.card__header { }
.card__body { }
.card__footer { }
.card--featured { }

避免重复代码

css
/* 不推荐：重复代码 */
.button-primary {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
}

.button-secondary {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #6c757d;
  color: white;
}

/* 推荐：使用混合宏或基础类 */
%button-base {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  color: white;
}

.button-primary {
  @extend %button-base;
  background-color: #007bff;
}

.button-secondary {
  @extend %button-base;
  background-color: #6c757d;
}

媒体查询优化

响应式优化

css
/* 移动优先的媒体查询 */
.element {
  padding: 10px;
}

/* 从小到大，浏览器只需在满足条件时应用 */
@media (min-width: 768px) {
  .element {
    padding: 15px;
  }
}

@media (min-width: 1024px) {
  .element {
    padding: 20px;
  }
}

/* 避免过多嵌套 */
/* 不推荐 */
.container {
  width: 100%;
  .item {
    width: 50%;
    @media (max-width: 768px) {
      width: 100%;
      .subitem {
        @media (max-width: 480px) {
          /* 过深嵌套 */
        }
      }
    }
  }
}

/* 推荐：扁平化结构 */
.container { width: 100%; }
.item { width: 50%; }
.subitem { }

@media (max-width: 768px) {
  .item { width: 100%; }
}

@media (max-width: 480px) {
  .subitem { }
}

实用优化技巧

CSS 变量优化

css
/* 使用 CSS 变量提高维护性 */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-size-base: 16px;
  --border-radius: 0.25rem;
}

/* 避免在频繁动画中使用 CSS 变量 */
/* 因为每次变更都需要重新计算 */
.animated-element {
  /* 避免在动画中频繁改变CSS变量 */
  transition: transform 0.3s ease;
}

条件加载

css
/* 根据功能支持加载样式 */
/* 支持 CSS Grid 的浏览器 */
@supports (display: grid) {
  .grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 回退到 Flexbox */
.grid-layout {
  display: flex;
}

.grid-layout .item {
  flex: 1;
}

避免 CSS 重排和重绘

css
/* 使用 CSS Containment 优化 */
.contain-layout {
  contain: layout; /* 告诉浏览器元素的布局变化不会影响外部 */
}

.contain-paint {
  contain: paint; /* 告诉浏览器元素的绘制被限制在指定区域 */
}

.contain-strict {
  contain: strict; /* 严格包含 */
}

/* 使用 content-visibility 优化长列表 */
.virtualized-list {
  content-visibility: auto;
  contain-intrinsic-size: auto 40px; /* 预设元素大小 */
}

测试和监控

性能监控

css
/* 为性能测试添加特殊样式 */
.performance-test {
  /* 避免影响正常样式 */
  /* 只在测试环境使用 */
}

构建工具优化

自动优化配置

javascript
// webpack.config.js 示例
module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: [
            'default',
            {
              discardComments: { removeAll: true },
            },
          ],
        },
      }),
    ],
  },
};

// PurgeCSS 配置示例
module.exports = {
  content: ['./src/**/*.{html,js,ts}'],
  css: ['./src/**/*.css'],
  // 移除未使用的CSS
};

最佳实践

  • 使用简短高效的选择器
  • 避免使用 @import
  • 最小化和压缩 CSS 文件
  • 使用 CSS Sprites 减少 HTTP 请求
  • 将 CSS 放在 head 标签中
  • 避免使用通配符选择器
  • 使用 transform 替代改变布局属性
  • 合理使用合成层
  • 优化字体加载策略
  • 定期审查和清理未使用的 CSS
  • 使用工具分析和优化性能