浅谈一下浏览器的缓存机制（面试问的很多）

以前占着记录的角度写文章，这次希望试着站在分享的角度写文章。可能不同点是希望能够给有需要的朋友了解一下。

从网上下了一张图片。

浏览器的缓存：因为这里只针对HTTP，service worker就不讲了。 缓存两部分：

1. 强缓存：直接在浏览器本地判断是否过期，未过期。直接调用本地缓存
2. 协商缓存：向服务器发送请求，服务器判断是否可以用本地缓存。可以则返回304

整个流程：

1. 初次访问，服务器返回200，浏览器将资源和响应头缓存。其中包括cache-control 设置的 max-age：设置了资源的保存时间。以及最近更新时间：last-modified
2. 下一次访问：先基于最近的更新时间判断是否超过了max-age，未超过则命中强缓存，直接用。超过了，说明未命中强缓存，发送请求到服务端，进行协商缓存判断
3. 向服务器发送 If-None-Match（存放Etag值） 和 If-Modified-Since 的请求（最近更新时间：last-modified）。根绝发送过来的Etag值和服务器生成的Etag值对比，如果未改，则返回304，命中协商缓存
4. 不同的话，则返回200，并且带上cache-control 和 etag值.并且浏览器对于资源重新缓存

强缓存两种方案：

• expires：到期的具体时间 HTTP1.1之后就是cache-control
• cache-control（这里只说max-age）：max-age（秒）

协商缓存两种方案：

• If-Modified-Since：（值为最近的更新时间），比对最新修改时间是否相同
• If-None-Match（存放Etag值） 比对资源生成的Etag值

希望大家共同进步————加油