3000字讲透HTTP缓存

概述

本文从 HTTP缓存策略 为入口，讲解HTTP缓存在浏览器的应用。

文章按 强缓存 、 协商缓存 和 启发式缓存 三个类别，进行深入剖析。

HTTP缓存策略

HTTP缓存分为三大策略：

• 存储策略
• 过期策略
• 对比策略（也叫协商策略）

存储策略

存储策略，用于决定HTTP响应内容，是否可以缓存到客户端。

Cache-Control 头的 max-age 、 no-cache 、 no-store 、 public 、 private 、 s-maxage ，使用存储策略，来指明资源文件是否可以被缓存。

过期策略

过期策略，用于决定客户端是否可以直接从本地缓存中读取文件数据，而不需要发起HTTP请求。

响应头包含 Cache-Control: public 的文件，虽然会被缓存，但不能明确当前文件是否在有效期内，所以需要其他字段做好“过期策略”。

强缓存的 Expires 字段，就是用 “过期策略” 定义缓存文件的有效期。借此，浏览器可判断是否需要发起HTTP请求。

响应头包含 Cache-Control: max-age=<seconds> 的文件，则包含存储策略和过期策略。

具体的策略应用，可以详细查阅下文的 Cache-Control 章节。

对比策略

将本地缓存文件的数据标识，发送到服务端进行验证，判断文件是否有效。这种策略，就叫对比策略，也叫协商策略。

对比策略，用于协商缓存场景，对应的字段是：

• Last-Modified 和 If-Modified-Since
• ETag 和 If-None-Match

例如：

ETag 用于存储缓存文件的哈希值。

浏览器需要判断当前缓存文件是否有效时，需要将 ETag 的值放入请求头 If-None-Match 字段，发送到服务端。

服务端接收到请求后，对比 If-None-Match 中的值与最新文件的值是否一致，来决定是否使用缓存。

当两个值一致时，则返回HTTP状态码304，告知浏览器，可使用本地缓存文件。

当两个值不一致时，则返回HTTP状态码200，并携带最新的文件返回给浏览器。

具体的策略应用，可以详细查阅下文的 协商缓存 章节。

小结

强缓存

强缓存通过字段 Expires 和 Cache-Control 来控制本地缓存文件的有效期。

如果本地缓存有效，则浏览器不会发起HTTP请求。

在浏览器控制台 NetWork 中的体现为：

200 OK (from disk cache) 或者  200 OK (from memory cache)

释义

200 OK (from disk cache)
200 OK (from memory cache)

强缓存的字段

字段	协议版本	缓存类型	响应头	请求头
Expires	HTTP1.0	强缓存	:o:️	:x: