强缓存和协商缓存

1.强缓存

强制缓存就是在第一次访问服务器取到数据之后,在过期时间之内不会再去重复请求。
只有第一次需要与服务端进行交互,强缓存的返回的状态码为200。
强制缓存的过期时间通过第一次访问服务器时返回的响应头获取。

2.协商缓存

1.每一次都要与服务器进行交互。先判断这个资源有没有过期,如果未过期,查看资源有没有被修改,
  没有被修改使用缓存,如果修改了,则重新向后台发起请求。
  
2.协商缓存每次请求都会与服务器交互,第一次是拿数据和标识的过程,第二次开始,就是浏览器
  询问服务器资源是否有更新的过程。每次请求都会传输数据,如果命中缓存,则资源的 Status 状态码为 304 而不是 200

3.区别

1.强制缓存在缓存有效的情况下不会去请求服务器, 其数据来源则是浏览缓存的本地磁盘。而协商缓存会向服务器请求,
  但是在协商缓存成功的情况下, 服务器只会返回一个不带响应体的报文,结合开头的背景来说 强制缓存选择“减少
  过桥次数”的策略, 而协商缓存则是采用 ‘减少过桥人数’的策略
  
2.强制缓存在浏览器强制刷新的情况下不会生效, 而协商缓存则不受影响。(调试代码测试时候,要注意)

3.强制缓存返回的报文状态码为 200, 协商缓存返回的报文状态码为 304 (前端使用fetch请求的情况, 协商缓存的 状态码304 会转成 2004.强制缓存发生在浏览器端, 协商缓存发生在服务器端

4.注意点

1.强制缓存存在一个瓶颈, 当浏览器用户强刷新时,浏览器会直接跳过强制缓存, 这点不注意很容易会被忽视掉。

2.强制缓存不适合 SPA 应用的入口文件, 因为重新部署后, 用户如果没有强制刷新, 则无法在第一时间内看到新的网页内容。

3.作为一个前端开发者可以通过设置请求头中的 no-cache 和 no-store 字段选择使用协商缓存或者不使用缓存!!!
### HTTP 缓存机制概述 HTTP 协议提供了多种缓存控制方法来优化网络性能并减少服务器负载。主要分为两种类型的缓存策略:强缓存协商缓存。 #### 强缓存 (Strong Cache) 当浏览器请求资源时,如果该资源被标记为可由客户端本地存储,则可以直接从浏览器缓存读取而无需再次向服务器发起请求。这通过响应头中的特定字段实现: - `Cache-Control` `Expires` 是两个用于定义资源有效期的关键字。 - 如果设置了 `Cache-Control: max-age=<seconds>` 或者存在有效的 `Expires` 头部,那么在这段时间内,浏览器会认为此内容是最新的,并不会发送任何额外的验证请求到源站获取最新版本的内容[^1]。 这种模式极大地提高了访问速度并且节省带宽消耗,因为整个过程完全发生在用户的设备上而不涉及外部通信。 ```http GET /image.png HTTP/1.1 Host: example.com HTTP/1.1 200 OK Date: Mon, 27 Jul 2009 12:28:53 GMT Server: Apache Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT ETag: "34aa387-d-1e3fbc80" Accept-Ranges: bytes Content-Length: 51 Vary: Accept-Encoding Content-Type: image/png Cache-Control: public, max-age=31536000 ``` #### 协商缓存 (Negotiated Cache) 对于那些可能频繁更新或需要更精确控制其新鲜度状态的对象来说,采用的是基于条件式的重新验证方式——即所谓的“协商缓存”。在这种情况下,即使有可用的本地副本,在每次加载页面之前都会先询问原始服务器确认这些数据是否仍然有效。 常用的方法包括利用如下头部信息来进行比较判断: - `If-None-Match`: 客户端携带 ETag 值给服务端对比; - `If-Modified-Since`: 使用最后修改时间戳作为参照标准; 一旦发现当前保存的数据已经过期或是发生了变化,就会返回完整的实体主体以及相应的元数据供前端刷新显示;反之则仅需回应一个简单的 `304 Not Modified` 状态码告知对方可以继续沿用旧有的记录即可[^2]。 ```http GET /index.html HTTP/1.1 Host: www.example.org If-None-Match: "33a6c576aeedfc1eace167b9b3f2dcb3" HTTP/1.1 304 Not Modified Date: Tue, 28 Jul 2009 12:28:53 GMT Server: Apache Etag: "33a6c576aeedfc1eace167b9b3f2dcb3" ``` ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值