优先级顺序依次为
Memory Cache、Service Worker Cache、HTTP Cache、Push Cache
面试时经常被问到对缓存有什么理解
好吧每次都是回答的cookie/localstorage/sessionstorage三个本地存储的区别,而忽略了前端最常见的cache，有时候资源更新了页面资源没引用新的文件，就是cache在搞事情
一般资源会经过浏览器发起请求，服务端处理请求，浏览器响应加载三个阶段
缓存的作用是性能优化，减少网络请求，减少延迟，重复利用
Memory Cache
资源(js,font,img)从内存缓存中获取
不会向服务器请求
关闭页面会释放内存
这个词常在network面板的资源状态中看到from memory cache
还会看见from disk cache
这个是指资源(css)存在硬盘上，关闭页面不会删除资源
<link rel="prefetch">异步加载优化
Service Worker Cache
浏览器离线缓存
Service Worker可以拦截修改访问的资源请求，不能访问dom，异步执行，必须https
cache.addAll()缓存文件
caches.match(event.request)缓存请求内容
HTTP Cache
强缓存
200 不请求服务器，使用缓存
- expires过期时间内不请求
- cache-control控制资源有效时间
- max-age设置有效时间
- s-maxage更高优先级，代理服务器中只认这个字段作为有效时间
- public客户端和代理服务器可缓存
- private只有客户端可缓存
- no-cache进行协商缓存方案
- no-store直接请求新资源
协商缓存
304 服务器告知资源未更新，使用缓存
- last-modified资源最后修改时间 > If-modified-since
- etag唯一编码 > If-None-Match
访问/刷新缓存
- 标签进入、输入url回车进入
- step1 判断no-cache/no-store
- 强缓存 判断expires是否过期
- step2 协商缓存
- step3 返回新资源200
- step1 判断no-cache/no-store
- 按刷新按钮、F5 刷新、网页右键“重新加载”
- step1 相当于cache-control 的 max-age = 0
- step2 协商缓存
- ctrl + F5 强制刷新
- step1 强制设置cache-control: no-cache
Push Cache
推送缓存
属于http/2，当以上缓存都未命中时触发
会话结束释放缓存
合理使用缓存
频繁变动的资源
- Cache-Control: no-cache，减少响应数据大小
不变化的资源
- Cache-Control: max-age=31536000强制缓存
- 加版本号更新
推荐浪里行舟的这篇文章深入理解浏览器的缓存机制，有使用缓存的流程图
