概述
缓存可以说是浏览器性能简单高效的一种优化方式， 它的优点：
- 减少页面加载时间，提升用户体验
- 减少网络带宽消耗
- 降低服务器压力
接下来通过缓存位置、缓存策略以及实际场景应用缓存策略来了解浏览器缓存
浏览器缓存位置
- Service Worker
- Memory Cache
- Disk Cache
- Push Cache
缓存过程
整体过程：
浏览器每次发送请求，都会向浏览器缓存中查找请求结果以及缓存标识。（强缓存）
强缓存失效之后，浏览器在请求头中携带相应的缓存tag来向服务器发请求，由服务器根据这个tag，来决定是否使用缓存。（协商缓存）
![[Pasted image 20220315165723.png]]
强缓存
定义：不会向服务器发送请求，直接从浏览器缓存中读取资源。
原理：强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程
-
浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
-
浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中
Expires
Expires即设置固定过期时间，存在于服务端返回的响应头中，告诉浏览器在这个过期时间之前可以直接从缓存里面获取数据，无需再次请求。
缺点：Expires 是 HTTP/1 的产物，受限于本地时间，如果修改了本地时间，可能会造成缓存失效。
Cache-Control
它和Expires本质的不同在于它并没有采用具体的过期时间点这个方式，而是采用过期时长来控制缓存，对应的字段是max-age。
主要取值为：
-
public：所有内容都将被缓存（客户端和代理服务器都可缓存）
-
private：所有内容只有客户端可以缓存，Cache-Control的默认取值
-
no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
-
no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
区别：
-
原理： expires:时间差，通过具体时间来判断是否更新 cache-control:时间段，通过时长来判断是否需要更新
-
兼容性： expires：属于1.0产物，优先级低，用于向下兼容 cache-control:属于1.1产物，优先级高
协商缓存
Last-Modified
即最后修改时间。在浏览器首次向服务器发送请求时，服务器会在响应头中加上这个时间字段返回给浏览器。
当浏览器再次请求服务器时，会根据最后时间进行判断：
- 当浏览器超过最后修改时间
- 否则返回304，告诉浏览器直接用缓存。
ETag
ETag 是服务器根据当前文件的内容，给文件生成的唯一标识（IDKEY），只要里面的内容有改动，这个值就会变。服务器通过响应头把这个值给浏览器。
浏览器接收到ETag的值，会在下次请求时，将这个值作为If-None-Match这个字段的内容，并放到请求头中，然后发给服务器。
服务器接收到If-None-Match后，会跟服务器上该资源的ETag进行比对:
- 如果两者不一样，说明要更新了。返回新的资源，跟常规的HTTP请求响应的流程一样。
- 否则返回304，告诉浏览器直接用缓存。
区别：
-
ETag:给定服务器生成的key,来进行信息查询比对，是否需要更新，所以在精度方面比Last-Modified好
-
Last-Modified：通过请求头包含的If-Modified-Since字段，和响应头的Last-Modified所给的时间进行
总结
首先通过 Cache-Control 验证强缓存是否可用
- 如果强缓存可用，直接使用
- 否则进入协商缓存，即发送 HTTP 请求，服务器通过请求头中的
If-Modified-Since或者If-None-Match这些条件请求字段检查资源是否更新- 若资源更新，返回资源和200状态码
- 否则，返回304，告诉浏览器直接从缓存获取资源
# 彻底弄懂浏览器缓存策略 # 彻底理解浏览器的缓存机制 谈谈缓存 # 浏览器缓存看这一篇就够了 # 彻底弄懂浏览器缓存机制及原理
