你知道什么是前端HTTP缓存吗？

字数 1295，阅读大约需 7 分钟

打开网页时，你遇到过页面加载缓慢的情况吗？很多时候，问题出在网络传输环节。HTTP 缓存技术能有效解决这个问题。它让网站加载更快，用户体验更好。

什么是 HTTP 缓存

HTTP 缓存是一种存储机制。浏览器把之前请求过的资源保存起来。下次需要相同资源时，直接从本地获取。不用再向服务器发送请求。

这样做的好处很明显：

• • 减少网络延迟
• • 降低服务器压力
• • 节省带宽资源
• • 提升页面加载速度

举个例子。你第一次访问某个网站，需要下载所有资源。这些资源被浏览器保存起来。第二次访问时，很多资源直接从缓存读取。页面打开速度就快多了。

HTTP 缓存的工作原理

HTTP 缓存通过请求和响应头来控制。服务器告诉浏览器如何缓存资源。浏览器按照指示执行。

缓存位置

浏览器缓存分为几种：

• • 内存缓存：读取速度最快，容量最小
• • 磁盘缓存：读取速度较慢，容量较大
• • Service Worker 缓存：可编程控制

缓存过程

缓存的基本流程是这样的：

1. 1. 浏览器发起资源请求
2. 2. 先检查本地是否有缓存
3. 3. 如果有缓存，检查是否过期
4. 4. 缓存未过期，直接使用
5. 5. 缓存已过期，向服务器验证

重要的缓存头字段

理解 HTTP 缓存，需要掌握几个关键头字段。

Cache-Control

这是最重要的缓存控制字段。它有很多指令：

   Cache-Control: max-age=3600, public

常用指令包括：

• • max-age：资源有效期，单位是秒
• • public：允许所有缓存存储
• • private：仅允许浏览器缓存
• • no-cache：需要先验证才能使用
• • no-store：禁止任何缓存

Expires

这是旧的缓存控制方式。指定具体的过期时间：

   Expires: Wed, 21 Oct 2022 07:28:00 GMT

现在推荐使用 Cache-Control。Expires 存在时区问题。

ETag 和 Last-Modified

这两个字段用于缓存验证。

ETag 是资源标识符：

   ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

Last-Modified 记录最后修改时间：

   Last-Modified: Wed, 21 Oct 2022 07:28:00 GMT

缓存策略实践

不同的资源需要不同的缓存策略。

静态资源缓存

图片、CSS、JavaScript 这些静态资源很少改变。可以设置长时间缓存：

   Cache-Control: max-age=31536000

这个设置让资源缓存一年。如果要更新资源，可以改变文件名。比如在文件名中加入版本号。

动态内容缓存

HTML 页面经常更新。缓存时间应该短一些：

   Cache-Control: no-cache

这样每次都需要验证缓存。保证用户看到最新内容。

敏感数据缓存

用户个人信息等敏感数据。不应该被共享缓存存储：

   Cache-Control: private, max-age=3600

缓存验证过程

缓存过期后，浏览器需要验证缓存是否还能使用。

条件请求

浏览器发送条件请求：

   GET /resource
If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"
If-Modified-Since: Wed, 21 Oct 2022 07:28:00 GMT

服务器检查资源是否改变：

• • 资源未改变，返回 304 状态码
• • 资源已改变，返回新资源和 200 状态码

ETag 验证

ETag 分为两种：

• • 强验证器：字节完全匹配
• • 弱验证器：内容语义相同就行

弱验证器以 W/ 开头：

   ETag: W/"0815"

项目中使用

Nginx 配置

在 Nginx 中配置静态资源缓存：

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

CDN 缓存配置

使用 CDN 时，缓存配置更重要。CDN 边缘节点可以缓存内容。用户从最近的节点获取资源。

常见问题与解决方案

使用 HTTP 缓存会遇到一些问题。

缓存失效问题

有时候更新了资源，用户还是看到旧版本。解决方法：

• • 改变资源 URL
• • 使用查询参数版本号
• • 设置合适的缓存时间

缓存空间管理

浏览器缓存空间有限。旧缓存会被自动清除。重要的资源可以持久化存储。

隐私和安全

缓存可能泄露用户隐私。敏感数据要谨慎缓存。使用 private 指令保护用户数据。

性能优化建议

基于 HTTP 缓存的优化建议：

1. 1. 分类设置缓存策略
• • 静态资源：长期缓存
• • 动态内容：短期缓存
• • 用户数据：谨慎缓存
2. 2. 使用合适的验证器
• • 静态资源用 ETag
• • 动态内容用 Last-Modified
3. 3. 监控缓存效果
• • 检查缓存命中率
• • 分析用户加载时间
• • 调整缓存策略

验证设置是否生效

现代浏览器提供缓存调试工具。

在 Chrome 开发者工具中：

• • Network 面板查看请求
• • 关注 Size 列显示 from cache
• • Application 面板管理缓存

通过这些工具，可以：

• • 验证缓存是否生效
• • 调试缓存配置问题
• • 分析缓存性能

HTTP 缓存是 Web 性能优化的重要技术。合理使用缓存，网站速度会明显提升。用户体验也会更好。