深入理解浏览器的缓存机制----笔记

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. 用户行为对浏览器的影响

1. 打开网页，地址栏输入地址： 查找disk cache，有则使用，无则发送请求
2. F5 普通刷新：未关闭tab,优先memory cache>disk cache
3. Ctrl+F5 强制刷新: 不适用缓存，发送请求，服务器返回200和最新内容