【浏览器】彻底搞懂缓存机制篇_浏览器缓存机制

大家好，我是  灰臂麒麟  。

大家有没有遇到前端面试中有以下场景：

面试官：你好，请详细说一下浏览器缓存机制；

内心独白：心想，这道题我准备过。"浏览器分强缓存、协商缓存..."。这道题肯定没问题，拿下；

自己：浏览器在对资源文件的缓存机制分强缓存、弱缓存。强缓存优先于协商缓存，强缓存生效则直接使用强缓存，强缓存不生效则进行协商缓存。

面试官：很好，那详细说一下。浏览器缓存位置和详细的缓存过程吧。

内心独白：哇靠，这没准备啊。这下完蛋了。

自己：嗯....；

面试官：好的，那我们进行下一题吧。

不知道大家有没有遇到上面的情况。反正我是遇到过。本该对知识点了解不够透彻，导致我们给面试官留下知识面不彻底的影响，从而影响我们在面试官的面试印象；

下面我们就详细的说说浏览器缓存机制。话不多说，干点正事：

目录

什么是浏览器缓存机制

缓存行为

缓存位置

剖析缓存过程

强缓存

缓存标识

Cache-Control 属性

no-cache、no-store 的区别

协商缓存

缓存过程

缓存标识 

协商缓存两个属性对比 

用户行为对浏览器缓存的影响

启发式缓存

结语

---

什么是浏览器缓存机制

缓存行为

• 浏览器每次发起请求，都会在浏览器缓存中查找请求的结果以及缓存标识
• 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

强制缓存优先于协商缓存进行，若强缓存生效则直接使用强缓存，若强缓存不生效则进行协商缓存

 协商缓存由 服务器 决定是否使用缓存；若协商缓存失效，那么就返回 200 ，重新返回资源和缓存标识，在存入浏览器缓存中；若协商缓存生效则返回 304 ，继续使用缓存。 

缓存位置

•  service Worker ：是运行在浏览器背后的独立线程，无法直接访问 DOM ，但可以用来 离线缓存 、 推送消息 和 网络代理 。传输协议必须为 HTTPS 。
•  Memory Cache ：内存中的缓存
•  Disk Cache ：存储在硬盘中的缓存
•  Push Cache ：（ 推送缓存 ）是 HTTP / 2 中的内容：

注： HTTP2 的服务器推送功能，在 chrome106 版本后不可用；

剖析缓存过程

• 浏览器第一次加载资源，服务器返回 200 ，浏览器将资源文件从服务器上请求下载下来，并把 response header 及该请求的返回时间一并缓存；
• 下一次加载资源时，先比较当前时间和上一次返回的 200 时的时间差，如果没有超过 cache-control 设置的 max-age ，则没有过去，命中强缓存，不发请求直接从本地缓存读取该文件（如果浏览器不支持 HTTP1.1 ，则用 expires 判断是否过期）；如果时间过期，则向服务器发送 header 带有 If-None-Match 和 If-Modified-Since 的请求
• 服务器接收到请求后，优先根据 Etag 的值判断被请求的文件有没有做修改， Etag 值一致则没有修改，命中协商缓存，返回 304 ；如果不一致则由改动，直接返回新的资源文件带上新的 Etag 值并返回 200 ；
• 如果服务器收到的请求没有 Etag 值，则将 If-Modified-Sinse 和被请求文件的最后修改时间做对比，一致则命中协商缓存，返回 304 ；不一致则返回新的 last-modified 和文件并返回 200 ；

强缓存

缓存标识

 强缓存 可以通过设置两种 HTTP Header 实现： Expires 和 Cache-Control 。强缓存标识在缓存期限不需要发送请求

 Expires 是 HTTP/1.0 的产物。值代表的是服务器的时间，并且 Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效。

 Cache-Control 出现于 HTTP/1.1 ，优先级高于 Expires 。该属性值标识支援会在 多少秒 后过期，需要再次请求。

Cache-Control 属性

 Cache-Control 首部字段是 HTTP/ 1.1 中定义的缓存字段，其用于控制缓存的行为，可以组合使用多种指令，多个指令之前可以通过 “,” 分割

// eg:
Cache-Control: max-age: 3600, s-maxage=3600, public
Cache-Control: no-cache

•  max-age 指令给出了缓存过期的相对时间，单位为秒数。时间是相对于请求的时间。
•  s-maxage 指令与 max-age 不同之处在于，其只适用于公共缓存服务器，比如资源从源服务器发出后又被中间的代理服务器接收缓存。当使用 s-maxage 指令后，公共缓存服务器直接忽略 Expires 和 max-age 指令的值。
•  public 指令表示该资源可以被任何节点缓存（包括客户端和代理服务器）
•  private 指令表示该资源只提供给客户端缓存，代理服务器不会进行缓存。同时当设置了   private 指令后 s-maxage 指令将被忽略

no-cache、no-store 的区别

•  no-cache 和 no-store 这两个指令在 请求 和 响应 中都可以使用
•  no-store 是真正的不进行任何缓存，告知服务器和缓存服务器，我请求、响应的内容有机密信息；
• 当 no-cache 在 请求头 中被使用时，表示 强制使用协商缓存 
• 当 no-cache 在 响应头 中被返回时，表示缓存服务器不能对资源进行缓存，客户端可以缓存资源，但每次使用缓存资源前都必须先向服务器确认其有效性。

协商缓存

缓存过程

 如果首次请求是没有 Cache-Control 和 Expires  ；或者 Cache-Control 的属性设置为 no-cache 时 ，又或者如果 缓存过期了 。就需要发起请求验证资源是否需要更新。向服务器发送请求时，服务器会根据这个请求的 请求头 里的 If-Modified-Since 和 If-None-Match 来判断是否命中协商缓存，如果命中，则返回 304 状态码并且更新浏览器缓存有效期

缓存标识 

•  Last-Modified 标识本地文件最后修改时间，发送请求时，会将当前的 Last-Modified 值作为   If-Modified-Since 这个字段的内容，放在请求头中发送给服务器，去询问服务器在该时间后资源是否有更新，有更新的话就会将新的资源发送回来，否则返回 304 状态码。
•  ETag 类似于文件指纹，请求时会将当前  ETag  作为  If-None-Match  这个字段的内容，并放到请求头中发送给服务器，服务器接收到  If-None-Match  后，会根服务器上该资源的  ETag  进行比对，有变动的话就将新的资源发送回来。否则返回  304  状态码

协商缓存两个属性对比 

• 在  精确度  上， ETag  优先  Last-Modified 。由于  ETag  是按照内容给资源上标识，因此能标准感知资源的变化。而  Last-Modified  就是不一样，它在一些特殊的情况并不能准确感知资源的变化，主要有两个情况
  • 编辑了资源文件，但是文件并没有更改，这样也会造成缓存失效。
  •  Last-Modified  能够感知的单位时间是秒，如果文件在  1  秒内改变了多次，那么这时候的  Last-Modified 并没有体现出修改了。
• 在  性能  上 ， Last-Modified  优于  ETag ，也很好理解， Last-Modified 仅仅只是记录一个时间点，而 ETag 需要根据文件的具体内容生成哈希值。
• 另外，如果两种方式都支持的话，服务器会优先考录 ETag 。

用户行为对浏览器缓存的影响

• 打开网址，地址栏输入网址 ：查找  disk cache 中是否有匹配。如有则使用；如没有则发送网络请求。
•  普通刷新（F5）：不使用强缓存，会判断协商缓存；且因为 TAB 并没有关闭，因此  memory cache  是可用的，会被优先使用（如果匹配的话）。其次才是  dish cache 。
•  强制刷新（Ctrl + F5） ：浏览器不实用缓存，服务器直接返回  200  和最新内容

启发式缓存

在资源请求的响应式头中没有出现  Expires  和  cache-control:max-age  字段值，并且没有限制   no-store   ，并且设置了  Last-Modified  ，那么浏览器默认会采用一个启发式的强缓存算法。

通常会根据响应头的  Date  减去  Last-Modified  值的  10%  作为缓存时间。

结语

至此，本篇文章的内容结束了。文章有不对或不完整的地方，望多指点；
如果对你学习有所帮助，还请  点赞、评论、关注  ；
希望可爱你动动小手  关注订阅  ，一起进步期待你的三连支持；