面试之《浏览器的缓存策略》

浏览器的缓存策略主要用于控制资源的存储和读取，以提高页面加载速度和减少网络请求。它主要通过 HTTP 头信息来实现，常见的缓存策略包括强缓存和协商缓存，以下为你详细介绍：

1. 强缓存
   • Expires：这是 HTTP/1.0 中的缓存控制字段，它的值是一个绝对的时间点（GMT 格式），表示资源的过期时间。当浏览器请求资源时，会先检查本地缓存中该资源的 Expires 时间，如果当前时间小于 Expires 时间，就直接从缓存中读取资源，而不会向服务器发送请求。例如，服务器返回的 Expires 头信息为 Expires: Thu, 01 Dec 2022 16:00:00 GMT，在这之前浏览器再次请求该资源时会使用缓存。
   • Cache-Control：是 HTTP/1.1 中定义的缓存控制字段，优先级高于 Expires。它有多个取值，常用的有：
     • no-cache：表示资源不能直接使用缓存，需要先与服务器进行验证，验证通过后才可以使用缓存。
     • no-store：表示禁止缓存，每次请求都需要从服务器获取最新的资源，并且不会将响应存储在缓存中。
     • public：表示该资源可以被任何缓存（包括代理服务器和用户代理的本地缓存）缓存。
     • private：表示该资源只能被用户代理（如浏览器）的本地缓存存储，不能被共享缓存（如代理服务器）缓存。
     • max-age：指定一个以秒为单位的时间长度，表示资源在多少秒内是有效的。例如，Cache-Control: max-age=3600 表示资源在 1 小时内是有效的，在这期间浏览器再次请求该资源时会直接从缓存中读取。
2. 协商缓存
   • Last-Modified 和 If-Modified-Since：Last-Modified 是服务器在响应资源时返回的头信息，表示资源的最后修改时间。浏览器在第一次请求资源时会记录这个时间，当再次请求该资源时，会在请求头中带上 If-Modified-Since 字段，其值为之前记录的 Last-Modified 时间。服务器接收到请求后，会比较 If-Modified-Since 与资源的实际最后修改时间，如果时间一致，说明资源没有变化，服务器返回 304 Not Modified 状态码，浏览器直接从缓存中读取资源；如果时间不一致，服务器返回最新的资源。
   • ETag 和 If-None-Match：ETag 是服务器为资源生成的一个唯一标识符，类似于指纹，用于标识资源的版本。浏览器在第一次请求资源时会获取到 ETag，再次请求时会在请求头中带上 If-None-Match 字段，其值为之前获取的 ETag。服务器接收到请求后，会比较 If-None-Match 与当前资源的 ETag，如果相同，返回 304 Not Modified 状态码，浏览器使用缓存；如果不同，返回最新的资源。ETag 的优先级高于 Last-Modified，因为 ETag 能更准确地判断资源是否发生了变化。
3. 缓存的处理流程
   • 当浏览器请求一个资源时，首先会检查是否存在强缓存。如果存在且缓存未过期（根据 Expires 或 Cache-Control 的 max-age 判断），则直接从缓存中读取资源，不会向服务器发送请求。
   • 如果强缓存不存在或已过期，浏览器会向服务器发送请求，并带上协商缓存的相关字段（If-Modified-Since 或 If-None-Match）。
   • 服务器根据协商缓存字段判断资源是否有变化。如果资源没有变化，返回 304 Not Modified 状态码，浏览器从缓存中读取资源；如果资源有变化，服务器返回最新的资源及相关的缓存控制头信息，浏览器更新缓存并使用新资源。

通过合理配置和利用这些缓存策略，浏览器可以在保证获取到最新资源的前提下，最大程度地减少网络请求，提高页面加载速度和用户体验。