聊聊前端缓存

基本的网络请求分为3个步骤：请求、处理、响应。
后端缓存主要集中在“处理”步骤，通过保持数据库链接，存储处理结果等方式缩短处理时间，尽快进入“响应”步骤。
前端缓存则可在剩下的两步：“请求”和“响应”中进行。在“请求”步骤中，浏览器可以通过存储结果的方式直接使用资源，省去了发送请求；而“响应”步骤需要浏览器和服务器共同配合，通过减少响应内容来缩短传输时间。

一、按缓存位置分类

优先级：Service Worker > Memory Cache > Disk Cache > 网络请求

1、memory cache

内存中的缓存。几乎所有的网络请求资源都会被浏览器自动加入到 memory cache 中。浏览器的tab关闭后 memory cache 便会失效，内存占过大的情况下，没关闭之前排在前面的缓存就已经失效了。其主要分两块：

1.1、 preloader

在解析静态资源的同时请求下一批资源，没有官方标准，有浏览器差异。这样请求的资源会放入 memory cache 中。

1.2、preload

例：，显示指定预加载资源，也会被放入 memory cache 中。

从 memory cache 获取缓存内容时，浏览器会忽视例如 max-age=0, no-cache 等头部配置，若想阻止 memory cache 的短期缓存，需要使用 no-store 。

2、disk cache

disk cache 又叫HTTP cache ，存储在硬盘上的持久缓存。 disk cache 会严格根据 HTTP 头信息中的字段来处理缓存。绝大部分缓存都来自 disk cache 。disk cache 可能会被浏览器自动清理，清理机制存在浏览器差异。

3、Service Worker

不受限于浏览器控制，直接操作缓存，关闭tab或浏览器后仍存在，除非手动调用api或者容量超限，才会被浏览器全部清空。

二、按失效策略分

memory ceche 不受开发者控制，也不受HTTP协议头约束；
Service Worker 缓存位置独立，使用不广泛。
强制缓存、对比缓存、Cache-Control均归于 disk cache。

1、强制缓存（也叫强缓存）

当客户端请求后，会先访问缓存数据库看缓存是否存在。如果存在则直接返回；不存在则请求真的服务器，响应后再写入缓存数据库。
强制缓存直接减少请求数，是提升最大的缓存策略，应被优先考虑。

1.1、Expires

HTTP 1.0 的字段，表示缓存到期的绝对时间。
缺点：1、受客户端本地时间影响；2、写法复杂。

1.2、Cache-control

HTTP 1.1 新增的字段，资源缓存的最大有效时间，相对值，单位是秒。优先级高于 Expires。
如：Cache-Control: max-age=2592000
Cache-control 常用值：

• max-age：最大有效时间
• must-revalidate：过期是否必须发送请求待服务器验证资源是否还有效
• no-cache：不建议缓存
• no-store：禁止缓存
• public：所有内容均可缓存（包括客户端、代理服务器，如CDN）
• private：只有客户端可以缓存，代理服务器不能缓存。默认值。

2、对比缓存 (也叫协商缓存)

当强制缓存失效(超过规定时间)时，就需要使用对比缓存，由服务器决定缓存内容是否失效，可以与强缓存一起使用。
流程：
请求缓存数据库拿缓存标识
-> 与服务器通讯
-> 未失效，服返回304继续使用缓存 OR 失效，返回新的数据和缓存规则
-> 浏览器将规则写入缓存数据库

优点：减少响应体积，来缩短网络传输时间

2.1、Last-Modified & If-Modified-Since

前者是服务端资源的上一次资源修改时间，后者是客户端缓存资源的上一次修改时间。服务器进行比较，命中返回304，不命中返回新资源和200。
**缺陷：**资源更新速度秒级以下无法使用；文件是服务器动态生成的，更新时间永远是生成时间，无法使用。

2.2、Etag & If-None-Match

Etag 存储的是文件的特殊标识(一般都是 hash 生成的)，服务器存储着文件的 Etag 字段。之后的流程和 Last-Modified 一致。
Etag 的优先级高于 Last-Modified。