浏览器的缓存机制 | Proxy的笔记记录

type

status

date

slug

summary

什么是缓存

缓存是浏览器的一种机制，可以把请求过来的 Web 资源（Html，js，css，图片等）拷贝一份副本在浏览器中，并根据请求配置选择是否使用该副本。

缓存作用

减少网络带宽消耗

降低服务器压力

减少网络延迟，使页面的打开速度更快，增加用户体验

根据不同的划分规则缓存可以分为以下几种

浏览器缓存规则定义位置

可以在 HTTP协议头 和HTML页面的 meta标签 中定义。

meta标签定义：

上述代码的含义：浏览器当前页面不被缓存，每次访问都向服务器请求。

http协议头定义：

与缓存有关的消息报头有expires，cache-control，Last-Modified，If-modified-since，Etag，If-none-match 等。

缓存分类

根据是否需要向服务器发送资源请求，可以分为 强缓存 和 协商缓存 。

强缓存意味着强制使用缓存，协商缓存意味着每用一次缓存都要协商一次。

强缓存和协商缓存都允许使用情况下，优先强缓存。

强缓存

强缓存的控制字段：

HTTP1.0：Expires

HTTP1.1 ：Cache-Control

判断过程：请求再次发起 -> 浏览器根据 expires 和 cache-control 判断目标资源是否命中"强缓存" -> 若命中，直接从缓存获取资源，不再与服务器发生通讯。

如果cache-control与expires同时存在，以cache-control为主，继续使用 expires 的目的就是向下兼容。

Expire 已经被 Cache-Control 替代，原因在于Expires依赖于本地时间，它控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，那么如果客户端与服务端的时间因为某些原因（例如时区不同；客户端和服务端有一方的时间不准确；用户修改了本地时间）发生误差，那么强制缓存则会直接失效。

Cache-Control取值：

在HTTP/1.1中，Cache-Control是最重要的规则，主要用于控制网页缓存，主要取值为：

public：所有内容都将被缓存（客户端和代理服务器都可缓存）

private：所有内容只有客户端可以缓存，Cache-Control的默认取值

no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定

no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存

max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效

must-revalidate: 强制浏览器严格遵守你设置的cache规则

proxy-revalidate: 强制proxy严格遵守你设置的cache规则

不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求（跟第一次发起请求一致）

存在该缓存结果和缓存标识，但该结果已失效，强制缓存失效，则使用协商缓存(暂不分析)

存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，直接返回该结果

协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，主要有以下两种情况：协商缓存生效，返回304 && 协商缓存失效，返回200和请求结果。

同样，协商缓存的标识也是在响应报文的HTTP 头中和请求结果一起返回给浏览器的，控制协商缓存的字段分别有：Last-Modified / if-Modified-Since 和 Etag / if-None-Match, 其中 Etag / if-None-Match 的优先级比 Last-Modified / if-Modified-Since 高

Last-Modified / If-Modified-Since

Last-Modified是服务器响应请求时，返回该资源文件在服务器最后被修改的时间，如下。

If-Modified-Since则是客户端再次发起该请求时，携带上次请求返回的Last-Modified值，通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求，发现请求头含有If-Modified-Since字段，则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比，若服务器的资源最后被修改时间大于If-Modified-Since的字段值，则重新返回资源，状态码为200；否则则返回304，代表资源无更新，可继续使用缓存文件，如下。

Etag / If-None-Match

Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)，如下

If-None-Match是客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后，发现该请求头中含有If-None-Match，则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比，一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200，如下

用户操作行为与缓存

总结

强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓存，主要过程如下：