浏览器缓存机制详解

以你之姓@ 2021-06-24 15:59 524阅读 0赞

### 来源：https://mangguo.org/browser-cache-mechanism-detailed/ ###

### 浏览器缓存 ###

浏览器缓存的知识是前端工程师必须要掌握的，因为这些知识直接影响到你的页面的用户体验，影响到你的页面的加载策略。接下来将要详细的讲述浏览器缓存的概 念和原理，新人要仔细阅读，甚至要多次反刍，缓存的知识除了和浏览器有关，还涉及到HTTP协议，所以这也是比较难于掌握的内容。

一般在硬件中，缓存在硬件中分一级缓存，二级缓存。但在软件中的缓存却不一样。

狭义上讲缓存就叫高速缓存，严格讲就是将数据暂时存放到某个地方。先要声明下，我的定义可能不严格，但这是我的理解，通俗易懂。

至于存到什么地方就有很多方式，可放到文件，内存中（如session），还有cache（高速缓存），还有 cookie，session，viewstate，这些是我们经常用到的，但可以认为他们是缓存数据。其实cache跟session有相似功能，但 cache可在代码中设置过期时间，依赖项。所谓依赖项（例如：微软的类cachedependcy sqlCacheDependency）当依赖项变动了，系统会通知cache过期，无效。以上只是说缓存，缓存可是有服务器缓存，客户端缓存啊。

近些天研究了下客户端缓存（即浏览器缓存），我想跟大家分享，有什么不同意见可评论。

估计大多数人很少说客户端缓存，包括我在内。那是因为我们编程时基本不考虑客户端缓存，书上也写得少。其实浏览器自动会管理缓存，但了解它至少知道有这么回事，有事编程还要控制客户端缓存。

浏览器缓存就是当你打开一个网页，浏览器会自动下载副本到你电脑上，就相当于你另存为网页到某个地方而已，只不过这里是自动而已。当然不是浏览器能把各种 网页都能下载到本地电脑上，它是有特殊情况。一般html，后者request是get请求，而post一般不缓存。（这个后面会说到）

当然客户端缓存是否需要是可以在服务端代码上控制的。那就是响应头。

响应头告诉缓存器不要保留缓存，缓存器就不会缓存相应内容；

如果请求信息是需要认证或者安全加密的，相应内容也不会被缓存；

校验参数非常重要，如果回应中1个参数都不存在，并且没有任何信息说明保鲜期（Expires或Cache-Control）的情况下，缓存将不会存储任何副本； 最常见的校验参数是文档的最后修改时间，通过最后Last-Modified头信息可以，当一份缓存包含Last-Modified信息，他基于此信息，通过添加一个If-Modified-Since请求参数，向服务器查询：这个副本从上次查看后是否被修改了。 HTTP 1.1介绍了另外一个校验参数： ETag，服务器是服务器生成的唯一标识符ETag，每次副本的标签都会变化。由于服务器控制了ETag如何生成，缓存服务器可以通过If-None-Match请求的返回没变则当前副本和原件完全一致。 所有的缓存服务器都使用Last-Modified时间来确定副本是否够新，而ETag校验正变得越来越流行。

响应头如果是POST模式递交数据，则返回的页面大部分不会被浏览器缓存，如果你发送内容通过URL和查询（通过GET模式），则返回的内容可以缓存下来供以后使用。

HTTP协议中关于缓存的信息头关键字包括Cache-Control(HTTP1.1)，Pragma(HTTP1.0)，last-Modified，Expires等。

### 缓存控制头 Cache-Control ###

Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令 通常覆盖默认缓存算法。缓存指令是单向的，即请求中存在一个指令并不意味着响应中将存在同一个指令。

cache-control 定义是：Cache-Control = “Cache-Control” “:” cache-directive。表 1 展示了适用的值。

表 1. 常用 cache-directive 值

表 2 表明在不同的情形下，浏览器是将请求重新发送到服务器还是使用缓存的内容。

表 2. 对 cache-directive 值的浏览器响应

<table style="border-spacing:0px;border:1px solid rgb(255,142,66);background:rgb(255,255,144);margin:10px 0px;color:rgb(0,0,0);font-family:arial;font-size:13px;"> 
 <tbody> 
  <tr> 
   <th style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">Cache-directive</th> 
   <th style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">打开一个新的浏览器窗口</th> 
   <th style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">在原窗口中单击 Enter 按钮</th> 
   <th style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">刷新</th> 
   <th style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">单击 Back 按钮</th> 
  </tr> 
  <tr> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">public</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器呈现来自缓存的页面</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器呈现来自缓存的页面</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器呈现来自缓存的页面</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">private</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">第一次，浏览器重新发送请求到服务器；此后，浏览器呈现来自缓存的页面</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器呈现来自缓存的页面</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">no-cache/no-store</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">must-revalidation/proxy-revalidation</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">第一次，浏览器重新发送请求到服务器；此后，浏览器呈现来自缓存的页面</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器呈现来自缓存的页面</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">max-age=xxx (xxx is numeric)</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">在 xxx 秒后，浏览器重新发送请求到服务器</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">在 xxx 秒后，浏览器重新发送请求到服务器</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">在 xxx 秒后，浏览器重新发送请求到服务器</td> 
  </tr> 
 </tbody> 
</table>

Cache-Control是关于浏览器缓存的最重要的设置，因为它覆盖其他设置，比如 Expires 和 Last-Modified。另外，由于浏览器的行为基本相同，这个属性是处理跨浏览器缓存问题的最有效的方法。

### 过期头 (Expires) ###

Expires 头部字段提供一个日期和时间，响应在该日期和时间后被认为失效。失效的缓存条目通常不会被缓存（无论是代理缓存还是用户代理缓存）返回，除非首先通过原始 服务器（或者拥有该实体的最新副本的中介缓存）验证。（注意：cache-control max-age 和 s-maxage 将覆盖 Expires 头部。）

Expires 字段接收以下格式的值：“Expires: Sun, 08 Nov 2009 03:37:26 GMT”。如果查看内容时的日期在给定的日期之前，则认为该内容没有失效并从缓存中提取出来。反之，则认为该内容失效，缓存将采取一些措施。表 3-6 表明针对不同用户操作的不同浏览器的行为。

表 3. 当用户打开一个新的浏览器窗口时的失效操作

表 4. 当用户在原始浏览器窗口中单击 Enter 按钮时的失效操作

表 5. 当用户按 F5 键刷新页面时的失效操作

表 6. 当用户单击 Back 或 Forward 按钮时的失效操作

注意：所有浏览器都假定为使用默认设置运行。

### 控制文件是否有修改 Last-Modified/E-Tag ###

Last-Modified 实体头部字段值通常用作一个缓存验证器。简单来说，如果实体值在 Last-Modified 值之后没有被更改，则认为该缓存条目有效。ETag 响应头部字段值是一个实体标记，它提供一个 “不透明” 的缓存验证器。这可能在以下几种情况下提供更可靠的验证：不方便存储修改日期；HTTP 日期值的 one-second 解决方案不够用；或者原始服务器希望避免由于使用修改日期而导致的某些冲突。

不同的浏览器有不同的配置行为。表 7-10 表明针对不同用户操作的不同浏览器的行为。

表 7. 当用户打开一个新的浏览器窗口时的 Last-Modified E-Tag 操作

表 8. 当用户在原始浏览器窗口中单击 Enter 按钮时的 Last-Modified E-Tag 操作

表 9. 当用户按 F5 键刷新页面时的 Last-Modified E-Tag 操作

表 10. 没有缓存设置且用户单击 Back 或 Forward 按钮

注意：所有浏览器都假定使用默认设置运行。

### 不进行任何缓存相关设置 ###

如果您不定义任何缓存相关设置，则不同的浏览器有不同的行为。有时，同一个浏览器在相同的情形下每次运行时的行为都是不同的。情况可能很复杂。另外，有些不该缓存的内容如果被缓存，将会导致安全问题。 不同的浏览器有不同的行为。表 11 展示了不同的浏览器行为。

表 11. 没有缓存设置且用户打开一个新的浏览器窗口

<table style="border-spacing:0px;border:1px solid rgb(255,142,66);background:rgb(255,255,144);margin:10px 0px;color:rgb(0,0,0);font-family:arial;font-size:13px;"> 
 <tbody> 
  <tr> 
   <th style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">&nbsp;</th> 
   <th style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">Firefox 3.5</th> 
   <th style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">IE&nbsp;8</th> 
   <th style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">Chrome 3</th> 
   <th style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">Safari 4</th> 
  </tr> 
  <tr> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">打开一个新页面</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器。返回代码是 200</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器。返回代码是 200</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器。返回代码是 200</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器。返回代码是 200</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">在原始窗口中单击 Enter 按钮</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器。返回代码是 200</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器呈现来自缓存的页面。</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器。返回代码是 200</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器。返回代码是 200</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">按 F5 键刷新</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器。返回代码是 200</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器。返回代码是 200</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器。返回代码是 200</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器。返回代码是 200</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">单击 Back 或 Forward 按钮</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器呈现来自缓存的页面。</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器呈现来自缓存的页面。</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器。返回代码是 200</td> 
   <td style="margin:0px;padding:5px 15px;border-color:rgb(255,142,66);">浏览器重新发送请求到服务器。返回代码是 200</td> 
  </tr> 
 </tbody> 
</table>

注意：所有浏览器都假定使用默认设置运行。

### 关键结论 ###

最后, 概括下关键的结论