CSS性能优化

CSS性能直接影响页面的加载速度和渲染效率。通过优化CSS代码，可以提高页面性能，提升用户体验。

CSS加载优化

1. 减少CSS文件大小

CSS文件越小，加载速度越快。可以通过以下方法减少CSS文件大小：

• 删除未使用的CSS：使用工具（如PurgeCSS）检测并删除未使用的CSS代码
• 压缩CSS：使用压缩工具（如CSSNano、UglifyCSS）压缩CSS代码，移除空格、注释等
• 合并CSS文件：减少HTTP请求次数（注意：在HTTP/2环境下，过多合并可能会影响性能）

2. 使用高效的选择器

如前所述，选择器的效率直接影响CSS的渲染性能。应优先使用类选择器和ID选择器，避免使用复杂的后代选择器和通配符选择器。

3. 避免使用@import

使用@import导入CSS文件会阻塞页面渲染，应尽量避免使用。建议使用<link>标签引入CSS文件，因为<link>标签可以并行加载CSS文件。

不好的做法：

@import url("styles.css");

更好的做法：

<link rel="stylesheet" href="styles.css">

4. 优先加载关键CSS

关键CSS是指渲染页面首屏内容所必需的CSS代码。将关键CSS内联到HTML文件中，可以减少首屏渲染时间。

推荐的做法：

<style>
  /* 关键CSS代码 */
  body {
    font-family: 'Arial', sans-serif;
    color: #333;
  }
  
  .header {
    background-color: #fff;
    padding: 20px;
  }
</style>
<link rel="stylesheet" href="non-critical.css">

CSS渲染优化

1. 避免触发重排（Reflow）

重排是指浏览器重新计算元素的位置和大小，这是一个昂贵的操作。应尽量避免触发重排。

可能触发重排的CSS属性：

• 尺寸相关：width、height、padding、margin
• 位置相关：top、left、right、bottom、position
• 布局相关：display、float、flex、grid
• 字体相关：font-size、line-height、font-family

减少重排的方法：

• 批量修改样式：使用class一次性修改多个样式
• 使用transform代替top、left等属性进行动画
• 避免频繁操作DOM
• 使用文档碎片（DocumentFragment）进行批量DOM操作

2. 避免触发重绘（Repaint）

重绘是指浏览器重新绘制元素的外观，不影响布局。虽然重绘的开销比重排小，但仍应尽量减少。

可能触发重绘的CSS属性：

• 颜色相关：color、background-color
• 边框相关：border-color、border-style
• 阴影相关：box-shadow、text-shadow
• 透明度：opacity

3. 使用GPU加速

使用transform和opacity等属性进行动画时，浏览器会使用GPU加速，提高动画性能。

推荐的做法：

.element {
  transition: transform 0.3s ease;
}

.element:hover {
  transform: translateY(-5px);
}

4. 避免使用昂贵的CSS属性

某些CSS属性的渲染成本较高，应尽量避免过度使用。

昂贵的CSS属性：

• box-shadow：多层阴影会增加渲染成本
• border-radius：复杂的圆角会增加渲染成本
• filter：滤镜效果会增加渲染成本
• clip-path：复杂的裁剪路径会增加渲染成本

CSS代码优化

1. 使用CSS变量

CSS变量可以减少重复代码，便于维护和修改。

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --border-radius: 4px;
}

.button {
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
}

2. 使用简写属性

使用简写属性可以减少CSS代码量，提高可读性。

不好的做法：

.element {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

更好的做法：

.element {
  margin: 10px 20px;
}

3. 避免重复样式

将重复的样式提取为公共类，便于复用和维护。

不好的做法：

.button {
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
}

.link-button {
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  background-color: transparent;
}

更好的做法：

.button {
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
}

.link-button {
  @extend .button;
  background-color: transparent;
}

4. 使用CSS预处理器和后处理器

CSS预处理器（如Sass、Less）提供了变量、混合宏、嵌套等功能，可以更高效地编写CSS代码。CSS后处理器（如PostCSS）可以自动添加浏览器前缀、压缩代码等。

CSS缓存优化

1. 设置合理的缓存策略

为CSS文件设置合理的缓存过期时间，可以减少重复请求，提高页面加载速度。

推荐的做法：

• 使用版本号或哈希值命名CSS文件（如styles.v2.css或styles.123abc.css）
• 设置较长的缓存过期时间（如1年）
• 当CSS文件更新时，更新文件名以强制浏览器重新下载

2. 使用CDN

使用CDN（内容分发网络）可以将CSS文件分发到全球各地的服务器，提高加载速度。

总结

CSS性能优化是提高页面性能的重要一环。通过优化CSS加载、渲染和代码结构，可以显著提高页面的加载速度和用户体验。

继续学习浏览器兼容性，了解如何处理不同浏览器的兼容性问题。