如何做 CSS 的性能优化

CSS 性能优化是 web 项目性能优化中的重要部分。

以下是一些策略来帮助优化 CSS 的性能：

1. 减少冗余代码

   为类或元素重复写入相同的 CSS 规则会浪费带宽和浏览解析时间。实用工具如 PurgeCSS 可帮助删除无用的 CSS。

2. CSS 压缩

   CSS 压缩可以移除所有多余的字符，包括空格、换行符和注释。使用CSS 压缩工具如 CSSO 或 clean-css。

3. 使用 CSS 雪碧图

   CSS 雪碧图合并了一系列的小图片到一张大的图片中。这可以减少HTTP请求的数量，提高加载速度。

4. CSS 对象模型（CSSOM) 和 渲染树

   浏览器通过解析 HTML 和 CSS 成 CSSOM 和 DOM ，然后结合他们形成渲染树。因此，应该尽量把 CSS 放在 HTML 文档的顶部，以加快渲染速度。

5. 避免使用过于复杂的选择器

   复杂的选择器可能会导致浏览器使用更多的资源来解析它们，优先使用类和 ID 选择器。

6. 使用 CSS 预处理器

   CSS 预处理器如 Sass 或 Less 可以使 CSS 更易于维护，同时可以使用变量，嵌套，混入 (Mixins) 等高级特性。

7. 使用硬件加速

   利用 GPU 来提供高效渲染，例如 transform 或 opacity。

8. 避免使用 @import

   @import 可能会导致更多的 HTTP 请求，使页面加载速度变慢。应该尽量使用命令行工具或构建系统的导入功能，以便在构建过程中进行文件合并。

9. 按需加载 CSS

   只加载需要立即使用的 CSS。

10. 缩小 CSS 的范围

    例如， instead of using * {margin: 0; padding: 0;}, 用类似 .myClass {margin: 0; padding: 0;} 更好。