HTTP的缓存策略测试 | 豆包MarsCode AI刷题

106 阅读3分钟

以在Chrome访问 百度首页(www.baidu.com) 为例,分析浏览器在处理 HTTP 请求时的缓存策略。


1. 首次访问

当用户首次访问百度首页时,浏览器没有缓存记录,因此直接向服务器发送请求。服务器返回页面内容及相关的缓存控制头部信息,例如:

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Cache-Control: private, no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

解释

  • Cache-Control: private, no-cache, no-store, must-revalidate:指示响应仅供单个用户使用,禁止任何缓存存储,每次使用时都必须重新验证。
  • Pragma: no-cache:与 Cache-Control: no-cache 类似,主要用于向后兼容 HTTP/1.0 客户端。
  • Expires: 0:指示资源已过期,客户端应获取最新版本。

结果:浏览器不会缓存此页面内容,每次访问都会从服务器获取最新版本。


2. 加载页面中的静态资源

百度首页包含多个静态资源,如 CSS、JavaScript 和图片等。以其中一个 JavaScript 文件为例:

https://www.baidu.com/js/bdsug.js

浏览器请求该资源时,服务器返回内容及缓存控制头部信息,例如:

HTTP/1.1 200 OK
Content-Type: application/javascript
Cache-Control: max-age=31536000
ETag: "5d8c72a3-1a2b3c4d"
Last-Modified: Tue, 22 Nov 2023 10:00:00 GMT

解释

  • Cache-Control: max-age=31536000:指示资源可在缓存中保存 31536000 秒(约一年)。
  • ETag: "5d8c72a3-1a2b3c4d":资源的唯一标识符,用于验证资源是否被修改。
  • Last-Modified:资源的最后修改时间。

结果:浏览器将该资源缓存,并在一年内的后续请求中直接使用缓存内容。


3. 再次访问静态资源

在缓存有效期内,用户再次访问该 JavaScript 文件时,浏览器直接从缓存中读取资源,无需向服务器发送请求。

结果:提高了页面加载速度,减少了带宽消耗。


4. 缓存过期后的访问

当缓存过期(超过 max-age 指定的时间)后,浏览器再次请求该资源时,会向服务器发送条件请求:

GET /js/bdsug.js HTTP/1.1
If-None-Match: "5d8c72a3-1a2b3c4d"
If-Modified-Since: Tue, 22 Nov 2023 10:00:00 GMT

服务器根据 If-None-MatchIf-Modified-Since 头部信息判断资源是否被修改:

  • 资源未修改:服务器返回 304 Not Modified 状态码,浏览器继续使用缓存内容。
  • 资源已修改:服务器返回新的资源内容,浏览器更新缓存。

5. 总结

通过上述分析可以看出,百度首页的缓存策略如下:

  • 动态内容(如首页 HTML):设置为不缓存,确保用户每次访问都获取最新内容。
  • 静态资源(如 JavaScript、CSS、图片):设置较长的缓存时间,减少重复请求,提高加载速度。

这种缓存策略有效地平衡了内容的新鲜度和加载性能,提升了用户体验。