CSS性能优化原则

CSS性能优化是提升网页加载速度和渲染效率的关键。合理的优化策略可以减少资源消耗，改善用户体验，尤其在复杂项目中效果显著。以下从多个维度探讨具体优化方法。

减少选择器复杂度

浏览器从右向左解析CSS选择器，过度嵌套会增加匹配成本。避免超过3层的嵌套，优先使用类选择器。

/* 不推荐 */
div#header ul.nav li.active a { color: red; }

/* 推荐 */
.nav-active { color: red; }

ID选择器具有最高优先级但难以复用，应控制使用频率。属性选择器如[type="text"]性能较差，在频繁操作的元素上慎用。

压缩与合并文件

通过构建工具自动化处理：

# 使用clean-css示例
cleancss -o styles.min.css styles.css

合并文件时注意：

1. 按模块合并而非全量合并
2. 保留@charset规则在首位
3. 避免@import声明

避免重排重绘

以下属性触发重排：

width, height, margin, padding
position, float, display
font-size, line-height

使用transform和opacity实现动画：

.box {
  transition: transform 0.3s;
}
.box:hover {
  transform: scale(1.05);
}

合理使用布局方式

Flexbox布局性能优于传统浮动：

.container {
  display: flex;
  gap: 12px; /* 替代margin间隔 */
}

Grid布局适合二维布局但初始化成本较高，避免在超长列表中使用。

优化字体加载

使用font-display控制字体渲染策略：

@font-face {
  font-family: 'Custom';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

预加载关键字体：

<link rel="preload" href="font.woff2" as="font" crossorigin>

媒体查询优化

按需加载样式：

/* 移动端优先 */
.component { padding: 8px; }

@media (min-width: 768px) {
  .component { padding: 16px; }
}

避免重复定义断点，建议使用Sass变量管理：

$breakpoints: (
  tablet: 768px,
  desktop: 1200px
);

@mixin respond-to($name) {
  @media (min-width: map-get($breakpoints, $name)) {
    @content;
  }
}

利用硬件加速

对动画元素启用GPU加速：

.accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
}

注意避免创建过多复合层，可通过Chrome DevTools的Layers面板检测。

减少冗余代码

使用CSS-in-JS时启用自动压缩：

// styled-components示例
const Button = styled.button`
  ${({ primary }) => primary && `
    background: blue;
    color: white;
  `}
`;

定期使用PurgeCSS删除未使用样式：

// webpack配置示例
const PurgeCSSPlugin = require('purgecss-webpack-plugin');

plugins: [
  new PurgeCSSPlugin({
    paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
  })
]

优化图片样式

避免使用CSS实现图片效果：

/* 不推荐 */
.img-placeholder {
  width: 100%;
  height: 200px;
  background: url('placeholder.jpg') no-repeat;
  filter: blur(5px);
}

/* 推荐 */
<img src="placeholder.jpg" alt="" loading="lazy">

变量与继承

合理使用CSS变量减少重复：

:root {
  --primary-color: #3498db;
  --spacing-unit: 8px;
}

.button {
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
  background: var(--primary-color);
}

继承通用样式减少代码量：

%ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title {
  @extend %ellipsis;
  max-width: 200px;
}

现代CSS特性应用

使用gap替代margin布局：

.grid {
  display: grid;
  gap: 16px; /* 替代传统margin方案 */
}

实验性特性检测：

@supports (aspect-ratio: 1) {
  .card {
    aspect-ratio: 16/9;
  }
}

关键CSS提取

首屏关键样式内联：

<style>
  .header, .hero { opacity: 0; }
  .critical { display: block !important; }
</style>

异步加载非关键CSS：

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

浏览器特定优化

针对Chromium浏览器优化滚动：

.container {
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE */
}
.container::-webkit-scrollbar { 
  display: none; /* Chrome/Safari */
}

使用will-change谨慎预声明变化：

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