缓存

缓存分为：1.dns缓存；2.内存缓存；3.浏览器缓存
1.dns缓存：主要就是在浏览器本地把对应的 IP 和域名关联起来，这样在进行DNS解析的时候就很快。

2.内存缓存：从优先级上来说，它是浏览器最先尝试去命中的一种缓存。
从效率上来说，它是响应速度最快的一种缓存。
内存缓存是快的，也是“短命”的。
它和渲染进程“生死相依”，当进程结束后，也就是 tab 关闭以后，内存里的数据也将不复存在

3.浏览器缓存也叫Http缓存，分为强缓存和协商缓存。优先级较高的是强缓存，在命中强缓存失败的情况下，才会走协商缓存。
1.强缓存是利用 http 头中的 Expires 和 Cache-Control 两个字段来控制的。
强缓存中，当请求再次发出时，浏览器会根据其中的 expires 和 cache-control 判断目标资源是否“命中”强缓存，
若命中则直接从缓存中获取资源，不会再与服务端发生通信。
实现强缓存，过去我们一直用expires。
当服务器返回响应时，在 Response Headers 中将过期时间写入 expires 字段。
如：expires: Wed, 12 Sep 2019 06:12:18 GMT

expires 是一个时间戳，接下来如果我们试图再次向服务器请求资源，浏览器就会先对比本地时间和 expires 的时间戳，
如果本地时间小于 expires 设定的过期时间，那么就直接去缓存中取这个资源。
从这样的描述中大家也不难猜测，expires 是有问题的，
它最大的问题在于对“本地时间”的依赖。
如果服务端和客户端的时间设置可能不同，或者我直接手动去把客户端的时间改掉，那么 expires 将无法达到我们的预期。
考虑到 expires 的局限性，HTTP1.1 新增了Cache-Control字段来完成 expires 的任务。
expires 能做的事情，Cache-Control 都能做；
expires 完成不了的事情，Cache-Control 也能做。
因此，Cache-Control 可以视作是 expires 的完全替代方案。
在当下的前端实践里，我们继续使用 expires 的唯一目的就是向下兼容。
如：cache-control: max-age=31536000
在 Cache-Control 中，我们通过max-age来控制资源的有效期。
max-age 不是一个时间戳，而是一个时间长度。
在本例中，max-age 是 31536000 秒，它意味着该资源在 31536000 秒以内都是有效的，完美地规避了时间戳带来的潜在问题。
Cache-Control 相对于 expires 更加准确，它的优先级也更高。
当 Cache-Control 与 expires 同时出现时，我们以 Cache-Control 为准。

2.协商缓存(304 or 200)
last-modified/If-Modified-Since
浏览器第一次请求数据之后,服务端在 Response Headers 会带上 Last-modified (服务端资源最后修改时间).
再次请求时, 请求头会带上 If-Modified-Since 去跟服务器资源的最后修改时间对比. 如果修改, 返回 200 , 否则返回 304 .
Etag/If-None-Match(同理)
Etag与last-modified对比
有些服务无法精确的得到资源最后修改时间.
last-modified 只能精确到秒.
一些资源的最后修改时间改变了，但是内容没改变，使用 Last-modified 看不出内容没有改变。
Etag 的精度比 Last-modified 高，属于强验证. 优先级高

 

实操缓存：

https://mp.weixin.qq.com/s/pU2gPJPDqo2sF1vp80YAQg