浏览器缓存

浏览器缓存读取规则

按缓存位置分类 (memory cache, disk cache, Service Worker 等)

• 它们的优先级是：(由上到下寻找，找到即返回；找不到则继续)
  * 按照操作系统的常理：先读内存再读硬盘
  * 1.Service Worker
  * Service Worker 能够操作的缓存是有别于浏览器内部的 memory cache 或者 disk cache 的。我们可以从 Chrome 的 F12 中，Application -> Cache Storage 找到这个单独的“小金库”。
  * 除了位置不同之外，这个缓存是永久性的，即关闭 TAB 或者浏览器，下次打开依然还在(而 memory cache 不是)。
  * 有两种情况会导致这个缓存中的资源被清除：手动调用 API cache.delete(resource) 或者容量超过限制，被浏览器全部清空。
  * 2.Memory Cache （内存中的缓存）
  * 几乎所有的网络请求资源都会被浏览器自动加入到 memory cache 中。但是也正因为数量很大但是浏览器占用的内存不能无限扩大这样两个因素，memory cache 注定只能是个“短期存储”。
  * 3.Disk Cache （硬盘上的缓存）
  * 因此它是持久存储的，是实际存在于文件系统中的。而且它允许相同的资源在跨会话，甚至跨站点的情况下使用，例如两个站点都使用了同一张图片。
  * disk cache 会严格根据 HTTP 头信息中的各类字段来判定哪些资源可以缓存，哪些资源不可以缓存；哪些资源是仍然可用的，哪些资源是过时需要重新请求的。
  * 当命中缓存之后，浏览器会从硬盘中读取资源，虽然比起从内存中读取慢了一些，但比起网络请求还是快了不少的。绝大部分的缓存都来自 disk cache。
  * 4.网络请求

按失效策略分类 (Cache-Control, ETag 等)

• 缓存分为强缓存和协商缓存两种

强缓存

• 强缓存不发送请求到服务器 直接从缓存提取
• 强缓存的实现方案主要有两种：Expires和cache-control
• Expires：过期时间，如果设置了过期时间，则浏览器会在过期时间内使用缓存。Expires是HTTP1.0的产物，受限于本地时间，如果人为修改了本地时间，可能会造成缓存失效。
• 资源在 2023 年 2 月 28 号 22:22:22 过期
• Expires: Tue, 28 Feb 2023 22:22:22 GMT
• cache-control：缓存控制，常用有以下几个设置：
• 资源在1小时内可使用缓存
• Date: Tue, 22 Feb 2022 22:22:22 GMT Last-Modified: Tue, 22 Feb 2022 22:00:00 GMT Cache-Control: max-age=3600
• max-age：表示缓存可以使用多长时间，是一个相对时间
• public：表示相应可以被任何区缓存
• private：只针对个人用户，不可被代理服务器缓存
• no-cache：可以在本地缓存，可以在代理服务器缓存，但是这个缓存要服务器验证才可以使用，强制客户端总是向服务器发送请求，由服务器判断缓存是否可用，即总是启用协商缓存
• no-store：彻底禁用缓存，每次都需要从服务器获取资源，流量消耗增加
• expires和cache-control都可以实现强缓存，但是Expires是HTTP1.0的产物，cache-control是HTTP1.1的产物，现阶段，我们会认为cache-control使用更广泛，Expires只是一种降级方案。
• 如果expires与cache-control同时存在的话，cache-control的优先级高于expires，原因是cache-control使用相对时间可能存在误差，expires使用的是服务器绝对时间。一搬选择cache-control。

协商缓存

• 协商缓存发送请求到服务器，通过服务器告知缓存是否可用
• 协商缓存有关的字段有Last-Modified/If-Modified-Since，Etag/If-None-Match
• Etag/If-None-Match
• Etag：这个字段由服务器生成返回给浏览器的，它的值是由文件的索引节点（INode）、文件大小（size）、文件最后修改时间（MTime）进行hash之后得到的
• If-None-Match：再次请求该资源时，带上上一次服务器返回的ETag值
• 过程：当强缓存过期，浏览器会启用协商缓存，首先判断当前是否存在ETag，如果存在，则再次向服务器发送请求时，在请求头上加上If-None-Match一同发送到服务器，服务器对比当前的If-None-Match与资源相对应的ETag是否相同，如果相同则说明缓存可用，则返回304，否则返回最新的资源。
• Last-Modified/If-Modified-Since
• Last-Modified：服务器返回的文件最后修改时间
• If-Modified-Since：再次请求资源是，带上上一次服务器返回的Last-Modified值
• 过程：当资源过期时，如果不存在ETag而是存在Last-Modified，则再次向服务器发送请求时，在请求头上会带上If-Modified-Since一同发送给服务器，服务器对比资源最后修改时间和当前客户端发送的If-Modified-Since这个时间，判断资源是否被修改，如果修改了则返回最新的资源，如果没有修改则返回304，使用缓存。
• ETag的优先级高于Last-Modified，服务器会优先验证ETag
• Last-Modified是以秒为单位的，所以在资源频繁更改的情况下，Last-Modified是不安全的，而ETag可以检查文件大小和文件的唯一索引节点，故即使修改频繁的资源依然能检测到更改

缓存策略

• 频繁变动的资源
• 对于频繁变动的资源，肯定首先要保证的就是及时性，即服务器文件更新，需要尽快展示在客户端，所以对于此种资源，建议禁用强制缓存，采用协商缓存的策略。

cache-control: no-cache
Last-Modified: Tue, 22 Feb 2022 22:00:00 GMT
ETag: deadbeef

cache-control: no-cache ，表示每次都从服务器询问资源是否更改
Last-Modified: Tue, 22 Feb 2022 22:00:00 GMT， 表示资源的最后修改时间
ETag: deadbeef ，表示资源对应的唯一标识

过程：

• 1、当浏览器查发现cache-control：no-cache时，会向服务器发起该资源的请求
• 2、但是在请求前，浏览器会先在自己的缓存中查找该资源，如果发现存在该资源的缓存文件，则将该缓存文件的ETag和Last-Modified字段转换为请求头中的If-None-Match和If-Modified-Since一同发送到服务端
• 3、如果发现不存在该资源，则直接请求
• 4、服务器接收到资源请求，如果不存在If-None-Match和If-Modified-Since请求头，则说明客户端没有缓存，直接返回资源
• 5、如果存在If-None-Match和If-Modified-Since请求头，服务器对比当前的If-None-Match与资源相对应的ETag是否相同，如果相同则说明文件没有更改，返回304让浏览器使用缓存，如果不相同，返回新文件。
• 不经常变化的资源
• 对于不经常变化的资源，建议设置强缓存，

cache-control:max-age=31536000

如上设置会强缓存该资源一年时间，如果我们中间需要修改该资源，可以采用在资源链接末尾添加唯一hash或是唯一时间戳来解决