深入理解 HTTP 缓存

浏览器缓存不是本地存储，要分清。浏览器缓存分为强缓存和协商缓存。本篇文章参考：使用 HTTP 缓存防止不必要的网络请求

讲解之前，我画了个简图来解释浏览器从缓存中获取资源的过程。

1. 强缓存

强缓存是浏览器缓存机制中的一种，它允许浏览器对之前请求过的资源进行缓存，并在下一次请求时直接使用缓存的资源，而不需要再次向服务器发送请求。这种方式可以有效地减少带宽消耗、降低服务器压力，并提高页面的访问速度。

强缓存的实现依赖于HTTP响应头中的特定字段，主要是Expires和Cache-Control。

• Expire：这个响应头在 Http 1.0 中提出（如果浏览器不支持HTTP1.1，则用expires判断是否过期），它表示资源的过期时间，即一个绝对时间戳。浏览器会将该时间与当前时间进行比较，如果当前时间在Expires之前，浏览器就会直接从本地缓存中获取资源，而不会再次向服务器发起请求。但是，Expires存在一些局限性，例如它受到客户端时间的影响，如果客户端的时间被更改，缓存可能会失效。

• Cache-Control：在HTTP 1.1版本中，引入了Cache-Control响应头来提供更灵活的缓存控制机制。这个字段可以设置多个指令，包括max-age、public、private、no-cache、no-store等。其中，max-age指令表示资源在缓存中的最大有效时间，是一个相对时间值。浏览器会根据这个值来决定是否使用缓存资源。如果同时存在Expires和Cache-Control，Cache-Control的优先级高于Expires。

以下 Cache-Control 值可帮助您微调无版本控制网址的缓存位置和方式：

• no-cache。这会指示浏览器必须在每次使用网址的缓存版本之前向服务器重新验证。
• no-store。这会指示浏览器和其他中间缓存（如 CDN）绝不存储文件的任何版本。
• private。浏览器可以缓存文件，但中间缓存无法缓存。
• public。任何缓存都可以存储响应。

当浏览器请求一个资源时，它会首先检查本地缓存中是否有该资源，并且该资源是否还在有效期内。如果是，浏览器就会直接使用缓存资源，而不会向服务器发送请求。这就是强缓存的工作原理。

需要注意的是，强缓存虽然可以提高性能，但也可能导致一些问题。例如，如果服务器上的资源已经更新，但由于缓存的存在，客户端可能无法获取到最新的资源。因此，在设计缓存策略时，需要权衡性能和资源更新的需求。

2.1. 强缓存缺点

假设您的服务器指示浏览器将某个 CSS 文件缓存 1 年 (Cache-Control: max-age=31536000)，但设计人员刚刚进行了一项紧急更新，您需要立即发布这项更新。

如何通知浏览器更新文件的“过时”缓存副本？ 您无法更改资源，至少不能更改资源的网址。浏览器缓存响应后，缓存版本将一直使用，直到它不再处于最新状态（由 max-age 或 expires 确定），或由于某种其他原因（例如，用户清除了浏览器缓存）从缓存中逐出为止。

因此，在构建网页时，不同的用户可能最终使用的是文件的不同版本：刚刚获取了资源的用户使用的是新版本，而缓存了较早（但仍有效）副本的用户使用的是旧版本的响应。

如何才能做到两全其美：客户端缓存和快速更新？您可以更改资源的网址，并在资源内容发生变化时强制用户下载新响应。通常情况下，可以通过在文件名中嵌入文件的指纹或版本号（例如 style.x234dff.css）来实现此目的。

2. 协商缓存

协商缓存是浏览器与服务器之间的一种缓存验证机制。当浏览器发出资源请求时，如果本地缓存失效或者没有命中强缓存，浏览器会使用协商缓存来与服务器进行“商量”，判断资源是否更新，进而决定是否使用本地缓存。

协商缓存主要依赖于请求头中的某些字段和服务器返回的响应头中的特定字段来进行判断。主要的请求头字段有If-Modified-Since和If-None-Match，而主要的响应头字段则有Last-Modified和ETag。

1. If-Modified-Since：这是一个请求头字段，它包含了浏览器上次请求该资源时服务器返回的Last-Modified字段的值。当浏览器再次请求该资源时，会将这个值放在If-Modified-Since请求头中发送给服务器。服务器会比较这个时间戳与资源在服务器上的最后修改时间，如果资源未被修改，则服务器会返回304状态码，告诉浏览器可以继续使用本地缓存；如果资源已被修改，则服务器会返回新的资源以及200状态码。
2. If-None-Match：这是另一个请求头字段，它包含了浏览器上次请求该资源时服务器返回的ETag字段的值。ETag是一个Web服务器为每个资源分配的唯一标识符，用于判断资源是否更新。当浏览器再次请求该资源时，会将这个ETag值放在If-None-Match请求头中发送给服务器。服务器会比较这个ETag值与当前资源的ETag值，如果相同，说明资源未更新，服务器返回304状态码；如果不同，说明资源已更新，服务器返回新的资源以及200状态码。

在响应头中，服务器会使用Last-Modified和ETag字段来告诉浏览器资源的最后修改时间和唯一标识符。当浏览器下次请求该资源时，会利用这些值来进行协商缓存的判断。

需要注意的是，如果请求中同时包含了If-Modified-Since和If-None-Match字段，服务器会优先验证If-Modified-Since请求头，然后再验证If-None-Match。只有当这两个验证都通过时，服务器才会返回304状态码，否则将返回新的资源和200状态码。（关于服务器是先验证 If-Modified-Since 还是 If-None-Match 并没有准确的顺序，甚可能只验证其中一个）。

建议使用 ETag：

ETag 和 Last-Modified 的用途相同：确定浏览器是否需要重新下载已过期的缓存文件。建议使用 ETag 方法，因为它更准确。Last-Modified的时间单位是秒，如果某个文件在1秒内改变了多次，那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度。

3. 使用场景

强缓存和协商缓存各有其适用的场景，它们的选择主要基于资源的更新频率、访问性能需求以及网络条件等因素。

强缓存的适用场景：

1. 资源更新不频繁：当服务器上的资源更新不频繁时，使用强缓存是合适的。因为强缓存允许浏览器直接使用本地缓存的副本，无需向服务器发起请求，这可以显著提高访问速度和降低服务器压力。
2. 对性能要求较高：对于需要快速加载和渲染的页面或资源，使用强缓存可以显著提高用户体验。

协商缓存的适用场景：

1. 资源更新较频繁：当服务器上的资源更新较为频繁时，使用协商缓存更为合适。因为协商缓存会在每次请求时与服务器进行“商量”，检查资源是否已更新。如果资源已更新，服务器会返回新的资源；如果资源未更新，服务器则返回304状态码，告诉浏览器继续使用本地缓存。
2. 对实时性要求较高：对于需要确保用户始终获取到最新资源的场景，如新闻网站、实时数据展示等，协商缓存可以确保客户端与服务器之间的数据同步。

在实际应用中，通常会根据资源的特性和业务需求来综合选择使用强缓存还是协商缓存，或者结合使用两者以达到最佳的缓存效果。同时，还需要注意缓存过期时间的设置，以避免因缓存过期而导致的问题。