http缓存是如何工作的？

前端

2023-11-16 02:11:10

HTTP 缓存：提升网站性能的关键

前言

在网站开发中，HTTP 缓存发挥着至关重要的作用。它允许浏览器临时存储网站资源，从而减少服务器负载、缩短页面加载时间，并增强用户体验。了解 HTTP 缓存的工作原理至关重要，以便优化网站的缓存策略，从而提升网站性能。

HTTP 缓存的类型

浏览器缓存分为两种类型：强缓存和协商缓存。

强缓存： 浏览器直接从本地缓存中读取资源，无需向服务器发出请求。这发生在以下条件满足时：
- 浏览器缓存中存在资源副本。
- 资源的 Cache-Control 或 Expires 头包含 max-age 或 expires 指令，且该指令尚未过期。
协商缓存： 浏览器向服务器发出请求，询问资源是否发生变化。如果资源没有变化，服务器将返回 304 Not Modified 状态码，浏览器将继续使用本地缓存中的资源。协商缓存的条件如下：
- 浏览器缓存中存在资源副本。
- 资源的 Cache-Control 或 Expires 头不包含 max-age 或 expires 指令，或该指令已经过期。

缓存验证

缓存验证是浏览器在使用本地缓存资源之前向服务器询问资源是否发生变化的过程。有两种缓存验证方法：

基于最后修改时间： 浏览器在请求资源时，会在请求头中包含 If-Modified-Since 字段，该字段的值是资源的最后修改时间。如果资源的最后修改时间晚于 If-Modified-Since 字段的值，则服务器将返回 200 OK 状态码，浏览器将下载新资源。否则，服务器将返回 304 Not Modified 状态码，浏览器将继续使用本地缓存中的资源。
基于 ETag： 浏览器在请求资源时，会在请求头中包含 If-None-Match 字段，该字段的值是资源的 ETag。服务器将比较 ETag 值并返回相应的状态码。

代码示例：

// 请求头中基于最后修改时间的缓存验证
const requestHeaders = {
  'If-Modified-Since': 'Tue, 28 Jan 2023 16:23:32 GMT'
};

// 响应头中基于 ETag 的缓存验证
const responseHeaders = {
  'ETag': '"123456789"'
};

缓存失效

缓存失效是指浏览器不再使用本地缓存资源，而是从服务器下载新资源。这发生在以下情况下：