浏览器缓存策略
为什么要用浏览器缓存
浏览器和服务器进行交互的过程， 时间开销的瓶颈往往出现在数据的传输的过程之中。
如果相同的数据被重复请求了不止一次，那么多余的请求次数必然会浪费网络带宽，以及延迟浏览器渲染所要处理的内容，从而影响用户的使用体验。
因此考虑使用缓存技术对已获取的资源进行重用，是一种提升网站性能与用户体验的有效策略。
缓存原理
缓存的原理是首次请求后保存一份请求资源的响应副本，当用户再次发起相同请求后，如果判断缓存命中则拦截请求，将之前存储的响应副本返回给用户，从而避免重新向服务器发起资源请求。
缓存的使用
一般用于静态资源的保存提高网页性能。静态资源有一定时间的不变性所以适合资源缓存
浏览器请求流程(强缓存与协商缓存共同使用)
强缓存
- 如果浏览器判断所请求的目标资源有效命中，则可以直接从强制缓存中返回请求响应和 Status Code 200 OK，无须与服务器进行任何通信。
- 强缓存是利用 http 头中的
Expires和Cache-Control两个字段来控制的，用来表示资源的缓存时间。
Expires
介绍:Expires 是在 HTTP1.0 协议中声明用来控制缓存失效日期的时间戳的字段，它由服务器端指定后通过响应头告知浏览器，浏览器在接收到带有该字段的响应体后进行缓存。
它的值是一个绝对时间的 GMT 格式的时间字符串与 Date 格式相同。
expires:Mon, 09 May 2023 10:47:02 GMT。
Date: Mon, 09 May 2023 02:54:38 GMT
- 浏览器再次发起相同的资源请求，便会对比 expires 与本地当前的时间戳，如果当前请求的本地时间戳小于 expires 的值，则说明浏览器缓存的响应还未过期，可以直接使用无须向服务器再次发起请求。只有当本地时间戳大于 expires 值发生缓存过期时，才允许向服务器重新发起请求。
- 缺陷: 电脑本地时间是可以被修改的。这样会触发永远不会过期
Cache-Control :max-age|s-maxage|no-cache|no-store|private|public
介绍: http 1.1 协议中添加了 Cache-Control 中的 max-age， 他是一个相对值， 单位为 S(秒)，代表多久过期。
//360S后资源过期
Cache-Control:max-age=360
-
no-cache 与 no-store
互斥 -
public 与 private
互斥- max-age 服务器端告知客户端浏览器响应资源的过期时长(常用)
- s-maxage s-maxage 表示缓存在代理服务器中的过期时长，当且仅当设置了 public 属性值时才有效。
- no-cache 设置 no-cache 表示跳过强缓存判断,强制进行协商缓存，若缓存未过期，则会使用本地缓存。
- no-store 设置 no-store 则表示禁止使用任何缓存策略，客户端的每次请求都需要服务器给予响应,获取资源。
- public 若资源响应头中的 cache-control 字段设置了 public 属性值，则表示响应资源既可以被浏览器缓存，又可以被代理服务器缓存
- private private 则限制了响应资源只能被浏览器缓存。
-
注意，Expires 是 http1.0 的产物， Cache-Control 则是 http1.1 的产物。 两者同时存在， 或者只存在其中之一， 都可以触发强制缓存
-
Cache-Control 比 Expires
优先级高 -
当满足字段约束的情况下， 浏览器就不会向服务器发送请求而是直接从服务器返回数据， 同时其状态码为 200
强制缓存主要取决于两个字段 Expires 和 Cache-Control 中的 max-age 字段， 在两个响应头都存在的情况下， 其流程如图所示
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1天，点击查看活动详情
