详解HTTP缓存

2024 2.19

声明

本文大部分内容来源：稀土掘金
作者：政采云技术
链接：https://juejin.cn/post/6844904153043435533

前言

HTTP缓存机制是Web性能优化的重要手段，它通过存储网络资源副本，减少了对源服务器的请求次数和数据传输量，从而提高了网页加载速度并降低了服务器负担。

HTTP缓存机制可以分为两大类：强缓存和协商缓存。缓存运作的整体流程图如下：

强缓存

不需要发送请求到服务器，直接读取浏览器本地缓存。

在Chrome中，强缓存又分为 Disk Cache 和 Memory Cache，存放的位置（硬盘或内存）由浏览器控制。是否强缓存由 Expires、Cache-Control、Pragma 3个响应头字段控制。

Expires

Expires的值一个日期/时间，表示资源在此时间之前都是有效的。

在浏览器发起请求时，会根据系统时间和 Expires 的值进行比较，由于和系统时间进行比较，所以当系统时间和服务器时间不一致的时候，会有缓存有效期不准的问题。Expires 的优先级在三个 Header 属性中是最低的。

Cache-Control

Cache-Control 是 HTTP/1.1 中新增的属性，在请求头和响应头中都可以使用，常用的属性值如有：

max-age：单位是秒，缓存时间计算的方式是距离发起的时间的秒数，超过间隔的秒数缓存失效，通常优先级高于Expires字段
no-cache：不使用强缓存，需要与服务器验证缓存是否新鲜
no-store：禁止使用缓存（包括协商缓存），每次都向服务器请求最新的资源
private：专用于个人的缓存，中间代理、CDN 等不能缓存此响应
public：响应可以被中间代理、CDN 等缓存
must-revalidate：在缓存过期前可以使用，过期后必须向服务器验证

Pragma

Pragma 只有一个属性值，就是 no-cache ，效果和 Cache-Control 中的 no-cache 一致，不使用强缓存，需要与服务器验证缓存是否新鲜，在 3 个头部属性中的优先级最高。

协商缓存

当浏览器的强缓存失效的时候或者请求头中设置了不走强缓存，并且在请求头中设置了If-Modified-Since 或者 If-None-Match 的时候，会将这两个属性值到服务端去验证是否命中协商缓存，如果命中了协商缓存，会返回 304 状态，加载浏览器缓存，并且响应头会设置 Last-Modified 或者 ETag 属性。

因此：

需要向服务器发送请求，以确认缓存的资源是否仍然是最新的。
即使使用了协商缓存，客户端也至少会发起一次请求到服务器，不过如果验证成功，服务器会响应304状态码，并且不会传送资源的数据。

ETag / If-None-Match

ETag/If-None-Match 的值是一串 hash 码，代表的是一个资源的标识符，当服务端的文件变化的时候，它的 hash码会随之改变，通过请求头中的 If-None-Match 和当前文件的 hash 值进行比较，如果相等则表示命中协商缓存。ETag 又有强弱校验之分，如果 hash 码是以 "W/" 开头的一串字符串，说明此时协商缓存的校验是弱校验的，只有服务器上的文件差异（根据 ETag 计算方式来决定）达到能够触发 hash 值后缀变化的时候，才会真正地请求资源，否则返回 304 并加载浏览器缓存。

Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since 的值代表的是文件的最后修改时间，第一次请求服务端会把资源的最后修改时间放到 Last-Modified 响应头中，第二次发起请求的时候，请求头会带上上一次响应头中的 Last-Modified 的时间，并放到 If-Modified-Since 请求头属性中，服务端根据文件最后一次修改时间和 If-Modified-Since 的值进行比较，如果相等，返回 304 ，并加载浏览器缓存。