浏览器会首先获取该资源缓存的 header 信息,然后根据 Cache-Control 和 expires 来判断是否过期。

如图,在浏览器第一次发送请求后,需要再次发送请求时,它会经过以下几个步骤:

1. 首先,浏览器发送请求到服务器,请求的资源可能是一个网页、css 文件、JavaScript 文件或者其他类型的文件;

2. 当服务器接收到请求后,首先检查请求中的缓存策略,例如请求头中的 Cache-Control 和 expires 字段;

3. 如果资源被标记为强缓存,服务器会进行以下判断:

   • 如果缓存有效,即资源的过期时间未到达或过期时间在当前时间之后,服务器返回状态码为 200 ok,并在响应头中设置适当的缓存策略,例如设置 Cache-Control 和 Expires 字段,告诉浏览器可以使用本地缓存;
   • 如果缓存无效,即资源的过期时间已过或过期时间在当前时间之前,服务器返回新的资源,状态码为 200 ok,并在响应头中设置适当的缓存策略;

4. 

   如果资源未被标记为强缓存或缓存验证失败,服务器进行协商缓存的判断:

   • 如果请求头中包含 If-Modified-Since 字段,表示浏览器之前缓存了该组员并记录了最后修改时间,服务器会根据资源的最后修改时间进行判断;
     • 如果资源的最后修改时间与 If-Modified-Since 字段的值相同或更早,服务器返回状态码 304 Not Modified,并在响应头中清除实际的响应头;
     • 如果资源的最后修改时间晚于 If-Modified-Since 字段的值,表示资源已经发生了变化,服务器返回新的资源,状态码为 200 ok,并在响应头中设置新的最后修改时间;
   • 如果请求头中包含 If-None-Match 字段,表示浏览器之前缓存了该资源并记录资源的 ETag 值,服务器会根据资源的 ETag 进行判断:
     • 如果资源的 ETag 与 If-None-Match 字段的值相同,服务器返回状态码 304 Not Modified,并在响应头中清除实际的响应体;
     • 如果资源的 ETag 与 If-None-Match 字段的值不同,表示资源已经发生了变化,服务器返回新的资源,状态码为 200 OK,并在响应头中设置新的 ETag;

5. 浏览器接收到服务器的响应之后,根据状态码和响应头信息进行相应的处理:

   • 如果状态码为 200 OK,表示服务器返回了新的资源,浏览器使用新的资源并更新本地缓存;
   • 如果状态码为 304 Not Modified,表示资源未发生变化,浏览器使用本地缓存的副本;
   • 浏览器根据响应头中的缓存策略进行进一步处理:
     • 如果响应头中包含 Cache-Control 字段,浏览器根据其指令执行缓存策略。例如,如果响应头中的 Cache-Control 包含 no-cache,浏览器将不使用本地缓存,而是向服务器发送请求获得最新的资源;
     • 如果响应头中包含 Expires 字段,浏览器将与当前时间比较,判断资源的过期时间。如果过期时间已过,浏览器将不使用本地缓存,而是向服务器发送请求获取最新的资源;
     • 如果响应头中包含其他相关的缓存控制字段（如 ETag），浏览器可以根据这些字段进行更精确的缓存控制和验证;

其中,在上面的流程中,又有几个令人难懂的字段,主要有以下几个:

1. ETag: 它是通过对比浏览器和服务器资源的特征值来决定是否要发送文件内容,如果一样就只发送 304 Not Modified;
2. Expires: 设置过期时间,是绝对时间;
3. Last-Modified: 以时刻作为标识,无法识别一秒内进行多次修改的情况,只要资源修改,无论内容是否发生实质性变化,都会将该资源返回客户端;
4. If-None-Match: 当客户端发送 GET 请求时,如果之前已经键相用资源的请求时,并且服务器返回了 ETag,那么客户端可以将 ETag 的值添加到 If-None-Match 头中,当再次请求该资源时,客户端会将 If-None-Match 头发送给服务器,服务器收到请求之后,会检查 If-None-Match 投中的值是否与当前资源的 ETag 值匹配:
   • 如果匹配,则表示客户端所请求的资源没有发生变化,服务器会返回状态码 304 Not Modified,并且不返回实际的资源内容;
   • 如果 If-None-Match 头中的值与服务器上资源的 ETag 值不匹配,说明资源发生了变化,服务器会正常返回资源,并返回状态码 200 OK;

图解强缓存和协商缓存

在上面的内容中讲了这么多的理论, 你是否还是不太理解什么是 强缓存和 协商缓存 啊,那么接下来我们就用几张图片来弄清楚这两者的区别。

强缓存

强缓存就是文件直接从本地缓存中获取,不需要发送请求。

首次请求