了解过.css 的优化吗？

发现宝藏

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。

---

CSS 优化是提升网站性能和用户体验的重要步骤，主要涉及减少加载时间、提高渲染速度和增强代码可维护性。以下是一些常见且实用的 CSS 优化策略：

1. 减少 CSS 文件大小

(1) 使用 CSS 压缩

压缩 CSS 代码可以去除空格、注释和多余字符，从而减少文件体积。

• 工具推荐：
  • 在线工具：CSS Minifier
  • 自动化工具：Gulp、Webpack 等打包工具的 CSS 压缩插件。

示例前：

body {margin: 0;padding: 0;
}h1 {font-size: 24px;color: blue;
}

压缩后：

body{margin:0;padding:0}h1{font-size:24px;color:blue}

---

2. 合并 CSS 文件

将多个 CSS 文件合并成一个文件，减少 HTTP 请求次数，提高加载速度。

• 示例工具：
  • 使用 Webpack、Gulp 等构建工具合并 CSS 文件。
  • 也可手动将多个 CSS 内容拷贝到同一个文件中。

---

3. 使用 CSS 预处理器

CSS 预处理器如 Sass 或 Less 提供更好的结构和功能，例如变量、函数、混合样式等，有助于提高代码的可维护性和减少冗余。

示例：Sass 代码

$primary-color: blue;body {margin: 0;padding: 0;
}h1 {color: $primary-color;font-size: 24px;
}

编译成 CSS：

body {margin: 0;padding: 0;
}h1 {color: blue;font-size: 24px;
}

---

4. 避免重复的样式

使用层级结构和 CSS 类复用 避免重复代码。

示例前：

.header h1 {font-size: 24px;color: blue;
}.footer h1 {font-size: 24px;color: blue;
}

优化后：

h1 {font-size: 24px;color: blue;
}

---

5. 移除未使用的 CSS

移除未使用的 CSS 可以显著减少文件大小。可以使用工具进行分析：

• 工具推荐：
  • PurgeCSS：分析 HTML 和 CSS 文件，去除未使用的样式。
  • Chrome DevTools：开发者工具的 Coverage 面板可以分析未使用的 CSS。

---

6. 使用 CSS 缓存

利用浏览器缓存将 CSS 文件存储在本地，减少重复加载。

• 配置 HTTP 头中的 Cache-Control 或 Expires。
• 使用版本号或哈希值来管理更新：

示例：

<link rel="stylesheet" href="styles.css?v=1.2.0">

---

7. 使用异步加载和延迟加载

对于非关键 CSS，可以通过 media 属性或异步加载的方式减少渲染阻塞。

示例：异步加载 CSS

<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

---

8. 使用 Critical CSS

将页面渲染所需的关键 CSS 直接嵌入到 HTML 中，其他非关键样式延迟加载。

示例：

<style>body {margin: 0;font-family: Arial, sans-serif;}
</style>
<link rel="stylesheet" href="styles.css">

---

9. 使用 CSS 现代特性

• 简化代码：使用 CSS 变量和 Flexbox、Grid 等现代布局取代传统布局方式。
• 减少 JS 依赖：例如使用 CSS 动画取代 JavaScript 动画。

示例：CSS 变量

:root {--primary-color: blue;
}h1 {color: var(--primary-color);
}

---

10. 避免使用过多的选择器

避免过度嵌套和复杂的选择器，保持代码简洁，提高渲染性能。

示例前：

div.container > ul > li > a {color: blue;
}

优化后：

.container a {color: blue;
}

---

11. 使用内容分发网络 (CDN)

将 CSS 文件托管到 CDN 上，提供更快的加载速度和缓存机制。

示例：

<link rel="stylesheet" href="https://cdn.example.com/styles.css">

---

12. 开启 HTTP/2 协议

HTTP/2 支持多路复用，允许多个 CSS 文件并行加载，不再需要合并 CSS 文件。