前端缓存机制——强缓存、弱缓存、启发式缓存

强缓存和弱缓存的主要区别是主要区别在于缓存头携带的信息不同。

强缓存:

浏览器发起请求,查询浏览器的本地缓存,如果找到资源,则直接在浏览器中使用该资源。若是未找到,或者资源已过期,则浏览器缓存返回未找到资源的信息,浏览器重新发起服务器请求,由服务器提供所需要的资源,服务器返回请求的资源后,浏览器将该资源存入浏览器的缓存中,以提供下一次使用。

找到所需资源

未找到所需资源

弱缓存(协商缓存):

协商缓存是在强缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识来决定是否使用缓存。

弱缓存生效
弱缓存失效

启发式缓存:


在强缓存中了解到缓存有效期由Expires和Cache-Control中的max-age来决定的,那么如果响应头中不存在这两个字段,缓存的有效期怎么计算?浏览器还会走强缓存吗?这就是启发式缓存解决的问题。

当报头中没有用来确定强缓存时间的字段时,浏览器会触发启发式缓存,缓存有效期计算公式:

                                                

                            (date - last-modified ) * 10%

取响应报头中 date 与 last-modified 值之差的百分之十作为缓存时间。

首部字段解析

强缓存:

从上文中可以看出,合理设置强缓存可以减少不必要的服务端请求,提升网页打开速度。设置强缓存的奥秘就在于请求头和响应头中的首部字段,一起来看一下和强缓存相关的首部字段吧。

Expires 首部字段是 HTTP/1.0 中定义缓存的字段,其给出了缓存过期的绝对时间,即在此时间之后,响应资源过期。

Cache-Control 首部字段是 HTTP/1.1 中定义缓存的字段,其用于控制缓存的行为,可以组合使用多种指令,多个指令之间可以通过 “,” 分隔,常用的指令有:max-age、s-maxage、public/private、no-cache/no store 等。

max-age: 给出了缓存的相对时间,单位为秒,即获得响应之后多少秒后过期,和Expires同时出现时,max-age优先级更高。
s-maxage:对公共缓存服务器生效,表示该资源在公共服务器中缓存的相对时间。如果存在公共缓存服务器,浏览器缓存失效后,会先请求公共缓存服务器,公共缓存服务器失效后会重新请求资源服务器更新公共缓存服务器中的资源,然后返回给浏览器。
public:表示可以被任何节点缓存,包括客户端和公共缓存服务器。
private:表示该资源只能被客户端(浏览器)缓存。
no-cache :表示客户端每次使用缓存资源前必须向服务器确认其有效性。
no-store :表示不缓存资源。

弱缓存:

Last-Modified:代表资源最后修改时间,存在服务端返回的响应头。
If-Modified-Since:存在客户端请求头,值为上次存储的Last-Modified,判断资源是否过期。
Etag: 代表资源的唯一标识,存在服务端返回的响应头,Etag优先级高于Last-Modified。
if-None-Match: 存在客户端请求头,值为上次存储的Etag,判断资源是否过期。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/166794.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

5G-A 商用加速,赋能工业互联网

2019 年 6 月,中国工业和信息化部发放 5G 商用牌照。同年 10 月,三大运营商公布 5G 商用套餐,11 月 1 日正式上线 5G 商用套餐,标志中国正式进入 5G 商用新纪元。今年是 5G 商用的第五年,在当前数字经济蓬勃发展的催化…

【springboot配置项动态刷新】与【yaml文件转换为java对象】

文章目录 一,序言二,准备工作1. pom.xml引入组件2. 配置文件示例 三,自定义配置项动态刷新编码实现1. 定义自定义配置项对象2. 添加注解实现启动时自动注入3. 实现yml文件监听以及文件变化处理 四,yaml文件转换为java对象1. 无法使…

js实现向上、向下、向左、向右无缝滚动

向左滚动 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, ini…

【MySQL习题】各个视频的平均完播率【全网最详细教学】

目录 数据表描述 问题描述 输出示例 解题思路【重点】 正解代码 数据表描述 有以下两张表&#xff1a; 表1&#xff1a;用户-视频互动表tb_user_video_log 数据举例&#xff1a; 说明&#xff1a; uid-用户ID,video_id-视频ID start_time-开始观看时间end_time-结束观…

【图像分类】【深度学习】【Pytorch版本】GoogLeNet(InceptionV1)模型算法详解

【图像分类】【深度学习】【Pytorch版本】GoogLeNet(InceptionV1)模型算法详解 文章目录 【图像分类】【深度学习】【Pytorch版本】GoogLeNet(InceptionV1)模型算法详解前言GoogLeNet讲解Inception结构InceptionV1结构1x1卷积的作用辅助分类器 GoogLeNet模型结构GoogLeNet Pyto…

SPSS曲线回归

前言&#xff1a; 本专栏参考教材为《SPSS22.0从入门到精通》&#xff0c;由于软件版本原因&#xff0c;部分内容有所改变&#xff0c;为适应软件版本的变化&#xff0c;特此创作此专栏便于大家学习。本专栏使用软件为&#xff1a;SPSS25.0 本专栏所有的数据文件请点击此链接下…

Java2 - 数据结构

5 数据类型 5.1 整数类型 在Java中&#xff0c;数据类型用于定义变量或表达式可以存储的数据的类型。Java的数据类型可分为两大类&#xff1a;基本数据类型和引用数据类型。 byte&#xff0c;字节 【1字节】表示范围&#xff1a;-128 ~ 127 即&#xff1a;-2^7 ~ 2^7 -1 sho…

三菱FX3U系列-定位指令

目录 一、简介 二、指令形式 1、相对定位[DRVI、DDRVI] 2、绝对定位[DRVA、DDRVA] 三、总结 一、简介 定位指令用于控制伺服电机或步进电机的位置移动。可以通过改变脉冲频率和脉冲数量来控制电机的移动速度和移动距离&#xff0c;同时还可以指定移动的方向。 二、指令形…

UE5、CesiumForUnreal实现加载GeoJson绘制单面(Polygon)功能(StaticMesh方式)

文章目录 1.实现目标2.实现过程2.1 实现原理2.1.1 数据读取2.1.2 三角剖分2.1.3 创建StaticMesh2.2 应用测试2.2.1 具体代码2.2.2 蓝图应用测试3.参考资料1.实现目标 通过读取本地GeoJson数据,在UE中以StaticMeshComponent的形式绘制出面数据,支持Editor和Runtime环境,GIF动…

kafka和rocketMq的区别

kafka topic 中每一个分区会有 Leader 与 Follow。Kafka 的内部机制可以保证 topic 某一个分区的 Leader 与 Follow 不在同一台机器上 Leader 节点承担一个分区的读写&#xff0c;Follow 节点只负责数据备份 如果 Leader 分区所在的 Broker 节点宕机&#xff0c;会触发主从节…

box-shadow用法详解

1、box-shadow概述 用来实现对元素产生阴影效果 1.1、box-shadow常用属性 box-shadow: h-shading v-shading blur spread color inset; box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式…

k8s存储卷 PV和PVC

目录 emptyDir存储卷 hostPath存储卷 nfs共享存储卷 PVC 和 PV 生命周期 一个PV从创建到销毁的具体流程如下&#xff1a; 静态pvc 动态pvc 3、定义PVC 4、测试访问 搭建 StorageClass NFS&#xff0c;实现 NFS 的动态 PV 创建 1、在stor01节点上安装nfs&#xff0…