浏览器缓存策略-以用Google Chrome打开京东官网为例
一、概念：
浏览器会将请求的资源进行存储为离线资源，当下次需要该资源时，浏览器会根据缓存机制判断之间使用缓存资源还是再次向服务器发送请求。
二、作用：
- 减少不必要数据的传输，降低服务器的压力
- 加快了客户端的访问速度
- 增强用户体验
三、分类：
强缓存：
1.不向服务器发送请求 ，强制使用缓存数据
2.实现方式：后端在响应头中返回Expires和Cache-Control
3.Expires:
- http协议1.0的字段。表示缓存过期时间，用来指定资源道歉的时间，是服务器端的具体的时间点。
- 浏览器使用Expires到期时间与本地时间进行对比，如果本地时间被修改或和服务器时间差距过大，会造成不准确的问题。
4.Cache-Control:
-
http协议1.1的字段。约定过期时间的相对时间。
-
主要取值有：
- public：所有内容都将被缓存（客户端和代理服务器都可缓存）。具体来说响应可被任何中间节点缓存，如 Browser <-- proxy1 <-- proxy2 <-- Server，中间的proxy也可以缓存资源，比如下次再请求同一资源proxy1直接把自己缓存的东西给 Browser 而不再向proxy2要。
- private：所有内容只有客户端可以缓存，Cache-Control的默认取值。具体来说，表示中间节点不允许缓存，对于Browser <-- proxy1 <-- proxy2 <-- Server，proxy 会老老实实把Server 返回的数据发送给Browser ,自己不缓存任何数据。当下次Browser再次请求时proxy会做好请求转发而不是自作主张给自己缓存的数据。
- no-cache：客户端缓存内容，是否使用缓存则需要经过协商缓存来验证决定。表示不使用 Cache-Control的缓存控制方式做前置验证，而是使用 Etag 或者Last-Modified字段来控制缓存。注意：no-cache这个名字有一点误导。设置了no-cache之后，并不是说浏览器就不再缓存数据，只是浏览器在使用缓存数据时，需要先确认一下数据是否还跟服务器保持一致。
- no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
- max-age：max-age=xxx (xxx is numeric)表示缓存内容将在xxx秒后失效
- s-maxage（单位为s)：同max-age作用一样，只在代理服务器中生效（比如CDN缓存）。比如当s-maxage=60时，在这60秒中，即使更新了CDN的内容，浏览器也不会进行请求。max-age用于普通缓存，而s-maxage用于代理缓存。s-maxage的优先级高于max-age。如果存在s-maxage，则会覆盖掉max-age和Expires header。
- max-stale：能容忍的最大过期时间。max-stale指令标示了客户端愿意接收一个已经过期了的响应。如果指定了max-stale的值，则最大容忍时间为对应的秒数。如果没有指定，那么说明浏览器愿意接收任何age的响应（age表示响应由源站生成或确认的时间与当前时间的差值）。
- min-fresh：能够容忍的最小新鲜度。min-fresh标示了客户端不愿意接受新鲜度不多于当前的age加上min-fresh设定的时间之和的响应。
ps:如果Expires和cache-Control两个字段同时存在，后者的优先级更高。
协商缓存：
1.当强缓存失效后，会使用协商缓存。协商缓存由服务器决定是否使用缓存。
2.过程：
-
向服务器发送请求资源并携带标识
- Etag字段：表示请求资源在服务器的唯一标识，浏览器可以根据Etag值缓存数据，下次请求时以if-None-Match字段请求。
- Last-Modified字段：用于标识请求资源的最后一次修改时间。
-
服务器会进行判断浏览器缓存的资源是否真的失效以及是否更新
- 真的失效，且服务器已经更新，返回200，重新返回最新资源和缓存标识。浏览器再次进入缓存，后续再次从强缓存开始。
- 缓存时间到了，但是资源还没更新，就还使用本地的。直接返回304。（代表资源还没有过期）
总结：这些缓存策略可以根据具体的应用场景和性能需求进行组合和定制，以提供最佳的缓存效果。选择合适的缓存策略有助于降低带宽使用、提高加载速度，并改善用户体验。
