https://www.jianshu.com/p/54cc04190252
深入理解浏览器的缓存机制----笔记
前端性能优化
缓存，简单高校的性能优化方式
理由1：一个优秀的缓存策略，可以缩短网页请求资源的距离，减少延迟
理由2：同时，缓存文件可以重复利用，还可以减少带宽，降低网络负荷
如何优化？在哪里优化？
1. 数据请求 客户端（前端发起网络请求）
2. 服务端（后端处理）
3. 浏览器响应
浏览器缓存可以在第一步和第三步优化性能
比如说 直接使用缓存，而不发起请求
或者发起请求但后端存储的数据和前端一致，那就没必要再将数据返回，减少响应数据
缓存位置：
1. Service Worker：浏览器的一个独立线程，https, 涉及请求拦截，未命中缓存则fetch请求，自由控制、持续
2. Memory Cache ：内存缓存，读取高效，但缓存持续性短，随着进程释放，但内存容量有限；内存缓存有preloader指令，可以一边解析一边请求下一个资源
3. Disk Cache：硬盘缓存，读取速度慢，容量和时效性强，根据http header字段判断
4. Push Cache：推送缓存，HTTP/2的内容，当以上3种缓存都没有命中，才会被使用。只在会话Session中存在，会话结束就被释放，缓存时间也短暂 5分钟左右
缓存策略：都通过HTTP header实现，第一次http请求，根据返回的响应头确定的
强缓存：
不向服务器发送请求，直接从缓存种读取资源
通过http header expries和cache-control实现
协商缓存：
服务端最新内容--->协商缓存 成功 304无更新 失败200 +请求结果；
通过http header last-modified和ETag
强缓存 Exprires, Cache-control
协商缓存 Last-Modified/If-Modified-Since和 Etag/If-None-Match
实际场景：
1. 频繁变动的资源, 用Cache-Control: no-cache 让浏览器每次都请求服务器
配合Etag和Last-Modified来验证资源是否有效
不能节省请求数量，但能显著减少响应数据大小
2. 不常变化的资源
Cache-Control: max-age=31536000 配置一个很大的缓存过期时间
3. 用户行为对浏览器的影响
- 打开网页，地址栏输入地址： 查找disk cache，有则使用，无则发送请求
- F5 普通刷新：未关闭tab,优先memory cache>disk cache
- Ctrl+F5 强制刷新: 不适用缓存，发送请求，服务器返回200和最新内容