本文重流程，轻细节，祝大家五一快乐！

为什么要使用缓存？

我们的掘金网站，假如每次刷新的时候都去服务器请求js文件，尽管这个js文件几乎每次请求下来都是一毛一样的！

[备注：此处纯属举例，掘金网站是有缓存的哟！😄]

如果我们可以把js文件缓存下来，请求的时候，先去缓存里面取，如果没有的话，再去服务器里面取。这样的话，我们的页面也会快一些！

我们的目的就是：让页面飞起来！🐂

浏览器缓存

浏览器请求资源的流程：强缓存 + 协商缓存

1.用户第一次请求资源

2.服务器返回资源，并且在response的header里面加上强缓存头expires/cache-control和协商缓存头last-modified/etag

[疑问：那么expires和cache-control之间或者是 last-modified和etag有什么关系呢？既生瑜何生亮？🤔]

3.浏览器接受到资源，把资源和response的header一起缓存下来

4.浏览器再次请求资源，先从缓存里面找，找到这个资源了，就拿请求时间和之前一起缓存的response的header头里面设置的expires/cache-control来判断是否过期，如果没有过期，命中强缓存，返回资源

5.如果过期了，就发送请求到服务端，request请求里面带着请求头if-modified-since = last-modified 和 if-none-match=etag字符串

6.服务端根据if-modified-since / if-none-match 进行判断过期没有，如果没有过期，就命中协商缓存，服务器不会返回，而是告诉客户端，这个资源可以从缓存里面拿。客户端get了之后，就从自己的缓存里面拿

7.如果过期了，就服务器返回最新的资源给客户端，response header的缓存过期时间会更新

浏览器请求资源的流程：memory cache + disk cache + service worker

[备注：如果要使用service worker，需要配合代码哟！这里我们假装我们的代码已经准备就绪了！😁 具体service worker的使用可以去看看其他优秀的专门讲service worker的掘金文章哟！🚀]

1.第一次请求资源，服务器返回资源以及response header，浏览器保存

2.浏览器加载完所有的资源，就注册Service Worker，在Cache Storage里面缓存我们的资源

3.第二次请求资源，走Service Worker 的 fetch 事件，在fetch事件里面拦截我们的请求，判断Cache Storage里面有没有缓存资源可以取出来的，如果有，就返回；如果没有，就放开拦截，发送我们之前的http请求

4.这时，已经走的是正常的http请求了，会先查看 memory cache，有资源，则返回！如果没有

5.查看 disk cache [我们的强缓存和协商缓存，是如何判断请求的，请看最上面！👩‍❤️‍👩]。如果有命中缓存，则返回，如果没有命中缓存，则

6.发送网络请求，拿到了响应结果，把资源存入 disk cache，并且把资源的引用存入memory cache ，最后把响应内容存入 Service Worker 的 Cache Storage

CDN缓存

CDN ： content-distribute-network，内容分发网络

CDN是一组分布在多个不同地区的服务器

为什么要引用CDN？

将数据缓存在距离用户地理位置最近的CDN服务器上，使用户以最快的速度获取 (因为相比服务器，CDN离我们更近)，

加快了用户的访问速度，也减少了网络拥堵的情况，也减轻了源服务器的压力。

CDN缓存是怎么运作的？

1.用户在浏览器输入url

2.浏览器向DNS服务器发起域名解析

3.因为我们接入了CDN，所以DNS服务器会将域名的解析权交给CND专用的DNS服务器

4.CND专用的DNS服务器将CDN的负载均衡设备IP返回给用户

5.用户根据ip地址访问CDN的负载均衡设备IP

6.CDN的负载均衡设备为用户挑选一台最合适的CDN缓存服务器，把这台CDN缓存服务器的ip发给用户

7.用户根据ip地址访问这台CDN缓存服务器

8.这台CDN缓存服务器响应用户的请求，如果有资源，就把资源返回给用户；如果没有资源，就向它的上一级CDN缓存服务器发送请求，直到追溯哦到网站的源服务器，将内容拉取到本地

浏览器 + CDN缓存是怎么运作的？

1.浏览器请求静态资源

2.如果本地静态资源没有过期，从浏览器本地获取静态资源

3.如果本地静态资源过期了，就去CDN节点请求资源

4.如果CDN节点有缓存，且没有过期，则从CDN获取

5.如果CDN里面缓存过期了，则由CDN节点向源服务器发送请求获取且更新资源

知识点合集

关于expires 和 cache-control

1.cache-control 和 expires 都是判断是否命中强缓存的字段

2.优先级 cache-control > expires

因为 cache-control 的出现是为了替代 expires 的
因为expires是一个绝对时间，时间可以根据系统电脑自己修改时间而混淆，cache-control的max-age是相对时间，不受系统时间的干扰
因为为了兼容旧版本，所以expires暂时没有被删除

关于last-modified 和 etag

1.last-modified 和 etag 是用来判断是否命中协商缓存的

2.response 的 last-modified 对应着 request 的 if-modified-since

request请求资源的时候，会带上if-modified-since，值为之前response返回的last-modified的值

服务器收到了请求，就拿request的if-modified-since与资源的last-modified对比

如果相同，命中协商缓存, 如果不同，返回最新的资源以及last-modified

因为有可能服务器上面资源发生了改变，但是最后修改时间没有改变的，所以last-modified其实有可能不准确！

所以就需要借助etag!🐑

3.response 的 etag 对应着 request 的 if-none-match

一旦资源发生变化，etag这个字符串就会发生变化，跟最后的修改时间没有关系。姑且猜测etag的值就是webpack里面contenth-hash值

etag是response header里面返回的

我们在下一次请求资源的时候，会把etag的值放入request的头if-none-match里面

服务器接受到了if-none-match的旧etag和最新资源的etag，如果相等，说明协商缓存命中，告诉浏览器去取缓存。

如果不相等，说明资源更新，返回新的资源，并且返回新的etag。

资料

[关于CDN的知识，这个文章里面还要一些链接，是关于浏览器缓存以及CDN单独知识的]https://www.jianshu.com/p/58d98c4cd115

[浏览器缓存] https://juejin.cn/post/6844903747357769742#heading-16