HTTP协议——缓存机制总结

本文介绍了HTTP协议中的缓存机制,包括Cache-Control和ETag的使用。通过Cache-Control的max-age设定缓存时间,ETag作为数据版本标识用于验证资源是否更新。当ETag一致时,服务器返回304状态码,客户端可继续使用本地缓存。同时讨论了no-cache、no-store以及public和private的缓存策略差异。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

概述

缓存是为了在下次使用资源时,能够快速的相应,避免多次IO操作。
HTTP协议中,天然支持对缓存的支持。

缓存

HTTP缓存主要是通过请求和相应报文头中对应的Header信息来控制缓存。

这要涉及两个Header。

  • Catch-Control:设定缓存策略,超出时间是多少。
  • ETag:当前返回数据的验证令牌,可能是Hash值,也可能是其他值,主要是用于在下次请求的时候带上,让服务端以此判断当前数据是否有更改。

在这里插入图片描述
服务端在返回相应数据的时候,会在报文头中添加用于描述当前相应的内容类型、数据长度、缓存策略(Catch-Control)、验证令牌(ETag)等信息。

上图是一次请求相应的事务,客户端请求一个资源的时候,服务端返回了一个200的状态码,表示相应正常,相应的数据长度为1024字节,建议客户端将此资源缓存最多120秒,并提供一个ETag令牌,用来当做当前资源版本的唯一标识。

ETag 数据令牌

在没有数据令牌的情况下,大概步骤是这样的:

  1. 客户端会首先找到本地的缓存,然后发现它已经失效,我发再次使用
  2. 客户端再次发起请求获取资源并缓存。然后再更新缓存超过时间。

max-age,只是一个参考值,是需要平衡的,太短会导致请求频繁,太长又会导致无法及时刷新客户端资源。

这就是ETag要解决的问题。

服务端生成并返回这个ETag,通常他是Hash值或者其他指纹,客户端无需关心他的规则,只需知道它是当前数据的一个唯一标识。

在这里插入图片描述

客户端在请求下载资源时,将通过If-Nono-Match这个请求报头,将ETag发送至服务端。

如果ETag和服务端的一致,服务端返回一个304状态码(不包含资源内容),则表明资源没有发生变化,可使用本地缓存数据,并刷新超时时间。

If-None-Match,他标识比较ETag是否不一致。

Catch-Control

之前只为Catch-Control设置了一个max-age,但是其实还有一些其他配置。

  1. no-cache 和 no-store
    这两个参数都表示每一次请求,都需要发送一个网络请求。
    他们之间的区别是
    no-cache: 并不是真的不缓存数据,他只是每次都确认资源是否过期,利用ETag令牌一定程度上减少传输流量
    no-store: 要求客户端每次都重新请求资源,不做任何缓存处理。
  2. public 和 private
    public: 是一种默认的策略,表示当前缓存是开放的,任何请求想用的中间环节都可以对其进行缓存。
    private: 则表示当前相应是针对单个用户的,不建议对其进行缓存。

在这里插入图片描述

Vue中,子组件可以通过两种方式调用父组件方法传递参数。 第一种方式是使用$emit方法。子组件可以通过this.$emit("父组件传递过来的函数","子组件数据")来触发父组件函数。在子组件方法中,可以使用this.$emit方法来触发父组件传递过来的函数,并通过参数传递子组件的数据。例如,在子组件的template中可以使用<button @click="childFun">子组件按钮</button>来调用子组件方法childFun,在childFun方法中使用this.$emit("fatherMethod","子组件数据")来触发父组件方法,并传递子组件的数据。 第二种方式是使用$parent属性。子组件可以通过this.$parent.parentFun来调用父组件方法。在子组件方法中,可以使用this.$parent.parentFun来调用父组件方法,并传递子组件的数据。例如,在子组件的template中可以使用<button @click="childFun">子组件按钮</button>来调用子组件方法childFun,在childFun方法中使用this.$parent.parentFun("子组件数据")来调用父组件方法。 所以,子组件可以通过上述两种方式来调用父组件方法并传递参数。这样能够实现子组件与父组件之间的数据传递交互。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue组件怎么调用父组件方法 Vue组件调用父组件函数的三种方法](https://blog.csdn.net/qq_45466204/article/details/126232074)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue组件中调用子组件函数方法](https://download.csdn.net/download/weixin_38659159/12941063)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值