跳到主要内容

浏览器强缓存详解

什么是强缓存​

强缓存是浏览器缓存中最直接、效率最高的一种缓存机制。当浏览器请求资源时，如果强缓存命中，浏览器将直接从本地缓存中获取资源，不会发送任何请求到服务器。这可以大大减少网络请求，提高页面加载速度。

强缓存的控制方式​

浏览器的强缓存主要通过HTTP响应头中的两个字段来控制：Expires和Cache-Control。

Expires​

Expires是HTTP/1.0规范中定义的字段，它的值是一个绝对时间，表示资源的过期时间。当浏览器再次请求该资源时，如果当前时间未超过Expires值，浏览器将直接使用缓存的资源。

示例：

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

Expires的局限性：

  • 依赖客户端的本地时间，如果客户端时间被修改，可能导致缓存失效或过期
  • 精度为秒级
  • 属于HTTP/1.0规范，现代浏览器更多使用Cache-Control

Cache-Control​

Cache-Control是HTTP/1.1规范中定义的字段，它提供了更精细的缓存控制能力。常用的值包括：

max-age​

max-age指定资源从请求时间开始的有效时长，单位为秒。例如max-age=31536000表示资源在一年内有效。

示例：

Cache-Control: max-age=31536000

public​

public表示资源可以被任何缓存（包括浏览器缓存、代理服务器等）缓存。

示例：

Cache-Control: public, max-age=31536000

private​

private表示资源只能被浏览器缓存，不能被代理服务器等中间缓存缓存。

示例：

Cache-Control: private, max-age=31536000

no-cache​

no-cache表示浏览器可以缓存资源，但在使用缓存资源之前必须先与服务器确认资源是否有更新（协商缓存）。

示例：

Cache-Control: no-cache

no-store​

no-store表示禁止浏览器和任何中间缓存存储该资源的响应。每次请求都必须从服务器获取完整的资源。

示例：

Cache-Control: no-store

no-transform​

no-transform指示代理服务器不要对资源进行转换或修改（例如压缩、转换图片格式等）。

示例：

Cache-Control: no-transform

s-maxage​

s-maxage专门用于共享缓存（如代理服务器），覆盖max-age或Expires的值。

示例：

Cache-Control: s-maxage=31536000

Expires与Cache-Control的优先级​

当HTTP响应头中同时存在Expires和Cache-Control时，Cache-Control的优先级高于Expires。现代浏览器更多使用Cache-Control来控制缓存，因为它提供了更精细的控制能力，并且不依赖于客户端时间。

强缓存的工作流程​

  1. 浏览器第一次请求资源，服务器返回资源和缓存控制头（Expires或Cache-Control）
  2. 浏览器将资源存入缓存，并记录缓存控制信息
  3. 浏览器再次请求该资源时，检查缓存是否命中：
    • 如果缓存未过期（强缓存命中），直接使用本地缓存，不发送请求
    • 如果缓存已过期（强缓存未命中），进入协商缓存流程或直接请求新资源

如何判断强缓存是否生效​

在浏览器的开发者工具中，可以通过以下方式判断强缓存是否生效：

  1. 打开Network面板
  2. 刷新页面
  3. 查看资源的Status列：
    • 如果显示(from disk cache)或(from memory cache)，表示强缓存生效
    • 如果显示状态码（如200、304等），表示强缓存未生效

强缓存的应用场景​

强缓存适用于以下场景：

  • 不经常变化的静态资源（如图片、CSS、JS文件等）
  • 具有较长有效期的公共资源
  • 对实时性要求不高的资源

如何清除强缓存​

用户可以通过以下方式清除或绕过强缓存：

  • 使用Ctrl+F5或Command+Shift+R强制刷新页面
  • 在开发者工具中勾选"Disable cache"选项
  • 清除浏览器缓存
  • 修改URL参数，使请求变为新的URL

强缓存的最佳实践​

  • 对于静态资源，设置较长的max-age值（如一年）
  • 使用文件哈希值或版本号作为文件名，确保资源更新时可以被正确获取
  • 结合协商缓存使用，以解决强缓存可能导致的资源更新问题
  • 对敏感资源或经常变化的资源，谨慎使用强缓存

强缓存的局限性​

  • 不能实时获取最新资源，可能导致用户看到旧版本内容
  • 缓存过期策略相对简单，不够灵活
  • 对于需要频繁更新的资源，缓存命中率较低

前端面试中的强缓存常见问题​

1. Expires和Cache-Control的区别是什么？哪个优先级更高？​

参考答案：

  • Expires：是HTTP/1.0的产物，表示资源的过期时间（绝对时间），基于服务器的时间戳
  • Cache-Control：是HTTP/1.1的产物，使用相对时间（秒）来控制缓存，功能更丰富

Cache-Control的优先级高于Expires。当两者同时存在时，浏览器会优先使用Cache-Control。

2. Cache-Control有哪些常用的指令？分别有什么作用？​

参考答案：

常用的Cache-Control指令包括：

  • max-age：设置缓存的最大有效时间（秒）
  • s-maxage：设置CDN等共享缓存的最大有效时间
  • no-cache：不使用强缓存，需要进行协商缓存
  • no-store：完全不缓存，每次都从服务器获取新资源
  • public：表示资源可以被任何缓存（包括浏览器、CDN等）缓存
  • private：表示资源只能被浏览器缓存，不能被CDN等共享缓存缓存
  • must-revalidate：缓存过期后必须向服务器验证，不能使用过期缓存
  • immutable：表示资源在有效期内不会改变，不需要发送条件请求验证

3. 为什么说使用Expires可能存在问题？​

参考答案：

使用Expires可能存在以下问题：

  1. 时间同步问题：Expires基于服务器和客户端的时间同步，如果两者时间不同步，可能导致缓存提前过期或过期后仍被使用
  2. 精度问题：Expires的时间精度受限于系统时间精度
  3. 功能有限：相比Cache-Control，Expires的功能较为单一，无法实现细粒度的缓存控制
  4. 安全性问题：用户可以修改本地时间，从而影响Expires的判断

4. 静态资源通常如何设置强缓存？为什么？​

参考答案：

静态资源（如CSS、JS、图片等）通常的强缓存设置是：

Cache-Control: public, max-age=31536000

即设置为一年的强缓存时间。

原因：

  • 静态资源通常不经常变化
  • 设置较长的缓存时间可以最大限度地减少重复请求
  • 结合版本控制（如文件哈希），可以确保资源更新时用户能获取到新版本

5. 什么是immutable指令？它有什么优势？​

参考答案：

immutable是Cache-Control的一个指令，表示资源在其缓存寿命期间不会改变。即使用户刷新页面，浏览器也不会向服务器发送验证请求。

优势：

  • 减少不必要的网络请求，提高性能
  • 避免304响应，节省带宽
  • 特别适合那些在版本更新之间不会改变的资源

强缓存经典案例分析​

案例1：大型电商网站的静态资源缓存优化​

背景：某大型电商网站有大量静态资源（CSS、JS、图片等），需要优化加载性能，同时确保用户能及时获取更新。

解决方案：

  1. 采用版本化文件名：

    • 对所有静态资源，使用文件内容的哈希值作为文件名的一部分，如main.abc123.js
    • 当文件内容发生变化时，文件名也会随之改变

  2. 设置超长强缓存时间：

    • 对版本化的静态资源设置Cache-Control: public, max-age=31536000（一年）
    • 由于文件名已包含版本信息，即使设置很长的缓存时间也不用担心更新问题

  3. 使用CDN分发：

    • 将静态资源部署到CDN，利用CDN的缓存能力
    • CDN节点也配置相同的强缓存策略

效果：

  • 静态资源的重复请求率降低了90%以上
  • 页面加载速度提升了50%
  • 服务器带宽消耗减少了75%

案例2：新闻网站的混合缓存策略​

背景：某新闻网站既有频繁更新的内容，也有相对稳定的静态资源，需要平衡性能和内容新鲜度。

解决方案：

  1. 静态资源强缓存：

    • 对CSS、JS、图片等静态资源，使用版本化+长强缓存策略
    • 设置Cache-Control: public, max-age=86400（一天）

  2. HTML页面协商缓存：

    • HTML页面不设置强缓存，使用Cache-Control: no-cache强制进行协商缓存
    • 结合ETag实现精确的资源验证

  3. 动态内容短时间缓存：

    • 对于新闻列表等相对稳定的动态内容，设置较短的强缓存时间
    • 如Cache-Control: public, max-age=300（5分钟）

效果：

  • 网站整体加载速度提升了35%
  • 服务器请求量减少了60%
  • 同时保证了新闻内容的及时性

总结​

强缓存是浏览器缓存体系中的重要组成部分，通过Expires和Cache-Control响应头字段控制资源的缓存行为。它可以在不发送请求的情况下直接从本地缓存获取资源，显著提高页面加载速度，减少网络流量消耗和服务器压力。

在实际应用中，我们应该根据资源的类型、更新频率等特性，合理设置强缓存策略，通常与版本控制结合使用，确保用户能及时获取更新的内容。同时，也要注意强缓存的局限性，在适当的场景下结合协商缓存，形成更完善的缓存策略。

掌握强缓存的原理和实践，不仅能帮助我们优化Web应用性能，也是前端面试中的高频考点。通过以上常见问题和经典案例的学习，相信你对强缓存有了更深入的理解。