成为高手之路-浏览器缓存

1. 什么是浏览器缓存？

浏览器缓存是浏览器将一些静态资源（如 HTML、CSS、JavaScript、图片等）保存在本地的一种机制。这样，当用户再次访问同一个网站时，浏览器可以直接从本地加载这些资源，而不需要重新从服务器下载，从而提升页面加载速度和用户体验。

简单来说，浏览器缓存就是 “把东西存起来，下次直接用” 的一种技术。

2. 为什么需要浏览器缓存？

  1. 提升页面加载速度：从本地加载资源比从服务器下载快得多。
  2. 减少服务器压力：缓存可以减少服务器的请求量，节省带宽。
  3. 提升用户体验：页面加载更快，用户会更满意。

3. 浏览器缓存的类型

浏览器缓存主要分为两种：

  1. 强缓存：直接从本地加载资源，不向服务器发送请求。
  2. 协商缓存：向服务器发送请求，由服务器决定是否使用缓存。

4. 强缓存

强缓存是通过 HTTP 响应头中的 Cache-Control 和 Expires 字段来控制的。

4.1 Cache-Control

Cache-Control 是 HTTP/1.1 中引入的字段，常用的值有：

  • max-age=3600：资源在 3600 秒内有效。
  • no-cache：不使用强缓存，但可以使用协商缓存。
  • no-store：完全不使用缓存，每次都从服务器获取资源。
  • public：资源可以被浏览器和代理服务器缓存。
  • private：资源只能被浏览器缓存。

例如：

1
Cache-Control: max-age=3600, public

4.2 Expires

Expires 是 HTTP/1.0 中引入的字段，用于指定资源的过期时间。例如：

1
Expires: Wed, 21 Oct 2025 07:28:00 GMT

注意：Expires 是绝对时间，受客户端时间影响，而 Cache-Control 是相对时间，更推荐使用。

5. 协商缓存

协商缓存是通过 HTTP 请求头中的 If-Modified-Since 和 If-None-Match 字段，以及响应头中的 Last-Modified 和 ETag 字段来控制的。

5.1 Last-Modified 和 If-Modified-Since

  • **Last-Modified**：服务器返回的资源最后修改时间。
  • **If-Modified-Since**：浏览器发送请求时，带上这个时间，询问服务器资源是否修改过。

如果资源没有修改，服务器返回 304 Not Modified，浏览器使用缓存；如果资源修改了，服务器返回 200 OK 和新资源。

5.2 ETag 和 If-None-Match

  • **ETag**：服务器返回的资源唯一标识（通常是哈希值）。
  • **If-None-Match**：浏览器发送请求时，带上这个标识，询问服务器资源是否修改过。

如果资源没有修改，服务器返回 304 Not Modified，浏览器使用缓存；如果资源修改了，服务器返回 200 OK 和新资源。

注意：ETag 比 Last-Modified 更精确，因为 Last-Modified 只能精确到秒。

6. 缓存的实际应用

6.1 静态资源的缓存策略

  • HTML 文件：通常设置为 no-cache 或较短的 max-age，因为 HTML 文件经常更新。
  • CSS、JavaScript、图片：通常设置为较长的 max-age，因为这些文件更新频率较低。

例如：

1
Cache-Control: max-age=31536000, public

6.2 动态资源的缓存策略

  • API 请求：通常设置为 no-cache 或较短的 max-age，因为 API 数据可能经常变化。

例如：

1
Cache-Control: no-cache

7. 如何配置缓存？

7.1 服务器配置

在服务器（如 Nginx、Apache）中配置缓存策略。例如，Nginx 配置：

1
2
3
4
location ~* \.(css|js|png|jpg|jpeg|gif|ico)$ {
  expires 1y;
  add_header Cache-Control "public";
}

7.2 前端配置

在前端构建工具（如 Webpack）中配置缓存策略。例如，Webpack 配置：

1
2
3
output: {
  filename: '[name].[contenthash].js',
}

8. 缓存的常见问题

8.1 缓存失效

如果资源更新了，但浏览器仍然使用旧缓存，可以通过以下方法解决：

  • 修改文件名（如使用 contenthash）。
  • 修改查询参数（如 style.css?v=1.0.0）。

8.2 缓存污染

如果缓存被恶意篡改，可以通过以下方法解决：

  • 使用 HTTPS 加密传输。
  • 设置 Cache-Control: private，避免代理服务器缓存。

9. 总结

浏览器缓存是前端开发中非常重要的一部分，虽然它主要由浏览器和服务器处理，但前端开发者也需要了解它的工作原理和配置方法。通过合理使用缓存，可以显著提升页面加载速度和用户体验。