从流程上了解前端缓存机制
为什么要使用缓存?
我们的掘金网站,每次刷新的时候都去服务器请求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-since=etag字符串
6.服务端根据if-modified-since / if-none-since
进行判断过期没有,如果没有过期,就命中协商缓存,服务器不会返回,而是告诉客户端,这个资源可以从缓存里面拿。客户端get了之后,就从自己的缓存里面拿
7.如果过期了,就服务器返回最新的资源给客户端,response header的缓存过期时间会更新
浏览器请求资源的流程:memory cache + disk cache + 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单独知识的]www.jianshu.com/p/58d98c4cd…
[浏览器缓存] juejin.im/post/5c22ee…
- 前端缓存机制
- 浏览器缓存机制分析及前端缓存清理
- 前端浏览器缓存的一些机制和提高性能的方案
- Glide-从源码的角度理解Glide的执行流程和缓存机制(三)
- 前端几种本地缓存机制
- 从PHP执行流程来了解opcode缓存
- 【MyBatis】mybatis执行流程与缓存机制分析
- 前端几种本地缓存机制
- 作为前端应当了解的Web缓存知识
- 深入了解Kafka【二】工作流程及文件存储机制
- 前端必须要懂的浏览器缓存机制
- 【js】了解前端缓存,收获不止于此!
- 深入了解前端路由的实现机制以及angularjs-route-ui的使用
- 作为前端应当了解的Web缓存知识
- Web前端的缓存机制(那些以代价换来的效率)
- 采用动态缓存机制的内容发布实现(一)工作流程
- 浏览器缓存机制图解流程总结
- 前端缓存了解
- Android之了解 ListView缓存机制
- 采用动态缓存机制的内容发布实现(一)工作流程