【CSS】 CSS 性能优化

1. 减少重绘和回流

• 避免复杂选择器：复杂选择器会增加浏览器的计算时间。
• 使用 transform 和 opacity ：这些属性不会引起回流，只会引起重绘。

2. 优化 CSS 选择器

• 避免使用通配符（*）：通配符选择器会匹配页面上的所有元素，增加计算量。
• 避免后代选择器：后代选择器（如 div p）比子选择器（如 div > p）效率低。
• 使用类选择器：类选择器比标签选择器更具体，匹配效率更高。

3. 减少 CSS 文件大小

• 压缩 CSS：通过删除空格、注释和优化代码结构来减小文件大小。
• 合并 CSS 文件：减少 HTTP 请求，合并多个 CSS 文件为一个。
• 使用 CSS 预处理器：如 Sass 或 Less，它们可以帮助你编写更高效、更易于维护的代码。

4. 利用 CSS 预加载

• 使用 link rel="preload"：预加载关键的 CSS 文件，加快页面渲染速度。

  <link rel="preload" href="styles.css" as="style">
  

5. 使用 CSS 变量

• 减少重复代码：通过 CSS 变量（自定义属性）来管理重复的值，减少代码量。

  :root {
      --main-color: #3498db;
  }
  
  body {
      color: var(--main-color);
  }
  

6. 避免使用 !important

• 减少 !important 的使用：!important 会覆盖其他样式规则，增加浏览器的计算时间。

7. 利用 CSS 动画

• 使用 CSS 动画而不是 JavaScript：CSS 动画通常比 JavaScript 动画更高效。

8. 优化图片和背景

• 使用 CSS 背景图片而不是图片标签：这样可以减少 HTTP 请求。
• 使用 SVG 图片：SVG 图片是矢量图形，可以无损缩放。

9. 使用媒体查询

• 合理使用媒体查询：避免在所有设备上加载不必要的样式。

  @media (max-width: 768px) {
      .sidebar {
          display: none;
      }
  }
  

10. 避免使用过多的层叠上下文

• 减少层叠上下文的创建：层叠上下文（如 position: absolute、opacity 等）会消耗额外的计算资源。