CSS 性能优化是 web 项目性能优化中的重要部分。 以下是一些策略来帮助优化 CSS 的性能： 1. **减少冗余代码** 为类或元素重复写入相同的 CSS 规则会浪费带宽和浏览解析时间。实用工具如 [PurgeCSS](https://purgecss.com/) 可帮助删除无用的 CSS。 2. **CSS 压缩** CSS 压缩可以移除所有多余的字符，包括空格、换行符和注释。使用CSS 压缩工具如 [CSSO](https://github.com/css/csso) 或 [clean-css](https://github.com/jakubpawlowicz/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;}` 更好。

Base64编码通常不是直接用来提升性能的，而是用来确保二进制数据可以通过仅支持文本格式的传输层安全地传输。Base64将二进制数据编码为ASCII字符串，这使得它可以在不支持二进制数据的系统（如电子邮件）中传输。虽然Base64编码的数据比原始二进制数据大约增加了33%，但在某些情况下，它可以间接地提升性能： 1. **减少HTTP请求**：在Web开发中，Base64编码通常用于将小的图片或其他文件直接嵌入到HTML或CSS中。这样做的好处是可以减少浏览器发起的HTTP请求的数量，因为所有的资源都包含在了主文档中。少了额外的请求，网页加载时间就会缩短，间接提高了用户体验和性能。 举个例子，如果一个网页中有多个小图标，通常的做法可能是每个图标一个HTTP请求来获取图像文件。如果将这些图标的图片用Base64编码后嵌入到CSS中，就可以将多个HTTP请求合并为一个请求，从而减少了服务器的请求负载和网络延迟，提高了页面的加载速度。 2. **数据URI方案**：Base64编码可以使用数据URI方案在Web页面中直接嵌入图像数据，这样可以避免服务器配置对小文件的较慢响应时间。服务器对小文件的处理往往不如大文件高效，因为涉及到磁盘I/O等开销。通过避免这些小文件请求，可以在服务器端节省资源，从而提升性能。 3. **安全和兼容性**：有些系统不支持二进制数据的传输，或者在传输过程中可能会因为某些字符（如NUL byte）的存在而出现问题。在这种情况下，Base64编码提供了一种可靠的方法来处理和传输数据，避免了潜在的数据损坏和传输错误，从而确保系统的顺畅运行和性能。 总之，Base64编码本身增加了数据量，理论上会降低传输效率，但通过减少HTTP请求的数量、充分利用缓存、避免小文件请求开销以及提高数据的安全性和兼容性，它可以在特定场景下间接提升系统的整体性能。

在Chrome浏览器中，可以使用开发者工具（DevTools）中的网络(Network)面板来查看网页加载过程中的各个阶段的具体时长。这些阶段包括重定向（Redirects）、缓存检查（AppCache）、DNS查询（DNS Lookup）、TCP握手（TCP Handshake）、发送请求（Request sent）、等待服务器响应（Waiting (TTFB)）、接收数据（Content Download）等。通过分析这些时长，我们可以针对性地优化网页的加载性能。 以下是基于Chrome Timing信息来进行性能优化的几个步骤和建议： 1. **减少重定向（Redirects）** - 优化点：每个重定向都会增加额外的网络延迟。为了减少这种延迟，最好是减少或消除不必要的重定向。 - 例子：如果你的网站从 `http://example.com`自动重定向到 `https://example.com`，这个重定向是必要的。但是，如果用户输入 `http://example.com/page`又重定向到 `https://example.com/page`，然后又因为尾斜杠缺失而重定向到 `https://example.com/page/`，这些额外的重定向就可以进行优化。 2. **优化DNS查找（DNS Lookup）** - 优化点：DNS查找的时间可以通过使用DNS预解析技术来减少。 - 例子：在HTML中使用 `<link rel="dns-prefetch" href="//example.com">`可以提前解析域名，减少用户在访问该域名时的解析时间。 3. **优化TCP握手（TCP Handshake）** - 优化点：TCP握手次数的减少，通常意味着减少了服务器连接。可以通过使用HTTP/2来同时发送多个请求，或通过保持连接来减少握手次数。 - 例子：启用HTTP/2可以让多个请求在同一个TCP连接上并行传输，减少了握手的需要。 4. **减少请求发送时间（Request sent）** - 优化点：请求发送时间可以通过减小请求大小来优化，例如减少Cookie的大小。 - 例子：如果服务器和客户端之间传输的Cookie过大，可以考虑减少Cookie的使用，或者将一些不需要每次都发送的数据存储在客户端的localStorage中。 5. **降低首字节时间（TTFB）** - 优化点：服务器响应速度的提升可以通过优化服务器的性能或增加后端响应速度来实现。 - 例子：对于慢查询进行优化，使用缓存来存储频繁请求的数据，或者提升服务器硬件性能。 6. **优化内容下载时间（Content Download）** - 优化点：内容下载时间可以通过减少资源大小或优化服务器的带宽利用率来缩短。 - 例子：压缩图片和文本文件，使用Gzip或Brotli对文本内容进行压缩，确保服务器有足够的带宽来处理高峰期的流量。 7. **使用浏览器缓存策略** - 优化点：通过合理配置缓存策略，可以减少重复资源的下载。 - 例子：为静态资源设置合理的缓存时间（例如CSS, JS, 图片文件），利用ETag或者Last-Modified头来验证资源是否需要更新。

基于HTTP网络层的前端性能优化主要关注的是资源的加载和传输效率。以下是一些前端可以采取的性能优化措施： ### 1. 减少HTTP请求次数 - **合并文件**：将多个CSS或JavaScript文件合并成单个文件以减少请求数量。 - **精灵图**（Sprite Maps）：将多个小图标合并到一张图片中，通过CSS背景定位显示所需图标。 - **内联图片**（Data URIs）：将小图像直接内嵌到HTML或CSS中，减少图片请求。 ### 2. 使用CDN（内容分发网络） - **分布式节点**：CDN将静态资源缓存在全球的多个节点，使用户能从就近的服务器下载，降低延迟。 - **缓存效率**：CDN通常会对资源进行优化缓存，提高再次访问的速度。 ### 3. 缓存优化 - **强缓存**：通过设置HTTP头中的`Cache-Control`和`Expires`标识，使资源在客户端本地缓存，直到缓存过期。 - **协商缓存**：利用`ETag`和`Last-Modified`标识，仅当资源更新时才重新下载。 ### 4. 延迟加载和按需加载 - **懒加载**：对于非首屏图片、视频等资源进行懒加载，即滚动到可视区域后才加载。 - **代码分割**（Code Splitting）：通过工具如Webpack实现模块的按需加载，避免单页应用加载过多不必要的JavaScript代码。 ### 5. 优化请求头和响应头 - **压缩请求头**：减少Cookie的大小和使用的数量，以及其他不必要的HTTP头部信息。 - **Gzip/Brotli压缩**：对文本资源进行Gzip或Brotli压缩，减少传输大小。 ### 6. HTTP/2和HTTP/3的使用 - **多路复用**：HTTP/2允许在同一个连接上并行传输多个请求响应，消除了队头阻塞问题。 - **服务器推送**：HTTP/2的Server Push可以提前发送资源，减少等待时间。 - **QUIC协议**：HTTP/3使用QUIC协议，减少连接建立时间，提升传输效率。 ### 7. 优化TLS/SSL握手 - **TLS 1.3**：使用更新的TLS版本可以减少握手过程中的往返次数。 - **OCSP Stapling**：通过服务器代替客户端查询证书状态，减少TLS握手的延迟。 ### 8. 优化资源的加载顺序 - **关键请求优先**：确保关键资源（如HTML、CSS、关键JavaScript函数）最先加载。 - **异步加载**：使用`async`和`defer`属性对非关键JavaScript脚本进行异步加载。 ### 9. WebP格式 - **使用WebP**：相比传统的JPEG或PNG格式，WebP格式在同等质量下具有更小的文件大小。 ### 10. Service Workers - **离线体验**：Service Workers可以帮助缓存资源，并在无网络状态下提供访问。 - **背景同步**：Service Workers可以在后台进行数据同步或推送通知。 举例来说，对于一个电商网站，我之前优化过的一个项目中，通过使用图片懒加载和WebP格式，网站首页的加载时间减少了约30%。利用HTTP/2的多路复用特性，也显著提高了资源加载的并行度，进一步减少了页面的完