前端网络 --- http缓存

什么是http缓存?

1、HTTP 缓存会存储与请求关联的响应,并将存储的响应复用于后续请求。

2、缓存的原理是在首次请求后保存一份请求资源的响应副本,当用户再次发起相同请求时,判断缓存是否命中,如果命中则将前面的响应副本返回给用户

3、使用缓存可以减少HTTP请求的数量,减少HTTP响应的大小,使web页面加载得更快。

memory cache和disk cache

memory cache:即内存缓存,存储在浏览器内存中,在访问页面后,再次刷新页面,可以发现很多数据来自Memory Cache(即内存缓存)

优点:

1、获取速度快;优先级高,当资源加载时,浏览器率先查找内存(memory cache)是否存在,存在则直接加载,不存在则找磁盘(disk cache)是否存在,存在则获取,不存在就进行网络请求。

缺点:

1、生命周期短,当网页的tab页面被关闭后(刷新不会),内存就会释放;且计算机内存的大小有限

disk cache:即磁盘缓存,存储在计算机硬盘中

优点:

1、存储容量大;生命周期长,只要不删除就一直存在

缺点:

1、读取速度相对memory cache较慢

http缓存方式

1、http缓存分为两种缓存,分别是强制缓存协商缓存

2、强缓存的优先级比协商缓存高

缓存图解,下面详细分析

http缓存---强制缓存

强制缓存过程:

客户端请求数据时判断有没有缓存数据存在,存在的话再判断缓存数据有没有过期,如果没有过期则直接使用缓存数据,无需与服务端进行通信

判断缓存是否过期是关键,下面就开始了

http1.0实现强制缓存的方法

如上图所示,Web服务器使用Expires响应头来告诉Web客户端它可以使用某个资源的缓存数据(副本)直到指定的时间为止

缺点:

Expires时间是服务端的时间,浏览器会将其与客户端的时间进行比对,这就可能导致客户端的时间和服务端的时间不一致,因为用户可以随意修改客户端的时间,这就会导致缓存命中的误差。

http1.1实现强制缓存的方法

引进了Cache-Control头来克服Expires头的限制

Cache-Control的常用属性有

1、max-age

1.1、可以指定缓存的生命周期(即被缓存多久)。它以秒为单位定义来一个更新窗。

1.2、Cache-Control是HTTP1.1的产物,其优先级比Expires高。如果两者同时出现,HTTP规范规定Cache-Control的max-age指令将重写Expires头。

2、private/public

2.1、public表示该响应可以被任何对象(包括:发送请求的客户端、代理服务器等等)缓存

2.2、private:私有缓存,表示该响应只能被发送请求的客户端缓存,而代理服务器等等其他不能缓存

2.3、private/public 未设置时,默认为private

3、no-cache

3.1、no-cache 不是禁止一切缓存的意思,而是强制客户端向服务端发送请求判断资源是否变更,变更则返回变更后的数据,未变更则返回304。即no-cache是禁止没有重新验证的情况下使用缓存,可以理解为不使用强缓存,使用协商缓存

4、no-store

4.1、no-store 表示该响应禁用缓存,不将响应存储在任何缓存中。

5、s-maxage

5.1、s-maxage:“s”表示共享,该字段和max-age类似,用于设置缓存时长,优先级高于max-age或Expires,但该字段仅在代理服务器(如CDN等)生效,仅当设置了public才有效。

http缓存---协商缓存

协商缓存过程:

强缓存的优先级比协商缓存高。当强制缓存没有命中(例如max-age过期),或者Cache-Control设置了no-cache(上文说到的),则开始进行协商缓存。

使用协商缓存时,客户端会携带缓存数据标识会向服务端发送一个请求,服务端识别对应的数据是否失效,如果未失效则返回304状态码,通知客户端比对成功,可以使用缓存数据。如果失效则返回最新数据,状态码为200。

下面就是协商缓存的具体分析

HTTP1.0实现协商缓存的方法------Last-Modified和If-Modified-Since

1、客户端首次请求一个资源时,服务端返回的header中如果有加上Last-Modified,其表示该资源的最后修改时间

2、那么当客户端后续再次请求该资源时,会在发送的请求头中携带If-Modified-Since,其值和之前返回的Last-Modified一致

3、服务端就会收到If-Modified-Since值,再根据资源最新的最后修改时间进行判断缓存是否失效。如果缓存命中(缓存有效),则返回空响应体, 状态码为304,也不会返回Last-Modified字段。如果缓存失效,则返回最新数据,并返回Last-Modified字段,状态码为200。

缺点:

1、Last-Modified和If-Modified-Since的检查时间最小单位是秒,如果资源在一秒以下的时间完成了更新,则资源最后修改时间(Last-Modified)不变,但实际资源已经变了,这时客户端的缓存是失效的,然而这种情况服务端依然会判断缓存命中。

2、如果资源进行了编辑操作,但是实际资源的内容没有修改,这时最后修改时间(Last-Modified)变了,这种情况服务端判断缓存失效,重新返回了新数据。而实际上是不需要的,因为文件内容没变。

HTTP1.1实现协商缓存的方法------Etag和If-None-Match

1、Etag是由服务端生成的用于标识资源的唯一标识符。

2、浏览器首次请求一个资源时,服务端根据资源内容生成一段hash字符串,加在返回的header中的Etag字段上,如下图

3、当客户端后续再次请求该资源时,会在发送的请求头中携带If-None-Match,其值和之前返回的Etag一致。

4、服务端就会收到If-None-Match值,并再次读取资源内容的Etag值进行匹配。如果缓存命中(缓存有效),则返回空响应体, 状态码为304。如果匹配失败,则缓存失效,返回最新数据,包括新的Etag字段,状态码为200。

5、Etag和If-None-Match的校验优先级比Last-Modified和If-Modified-Since高。

缺点:

1、但是由于Etag的生成需要服务端的计算开销,资源越大越多,开销就越重,会影响服务端的性能

浏览器用户行为和缓存

1、地址栏回车、页面链接跳转、页面前进/后退等等这些用户行为都是按照正常的缓存检查流程进行

2、而当用户点击刷新按钮时,浏览器会对本地的缓存文件过期,但是If-Modified-Since和If-None-Match还是会带上,意味着还是可能进行协商缓存

3、当用户进行强制刷新的操作时,浏览器不仅会对本地的缓存文件过期,而且也不会带上If-Modified-Since和If-None-Match,意味着相当于全部重新第一次请求。

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

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

相关文章

react v18 项目初始化

按照以下命令进行傻瓜式操作即可: 全局安装脚手架工具: npm install -g create-react-app创建项目my-react-app: create-react-app my-react-app安装 antd: yarn add antd安装 react-router-dom: yarn add react-router-dom启动项…

图论学习总结

目录 图论学习总结前言一、基础知识图的存储图的遍历 二、最短路多源最短路 F l o y d Floyd Floyd​ 算法例题及变形 e g 1 : S o r t i n g I t A l l O u t eg1:Sorting\ It\ All\ Out eg1:Sorting It All Out ( 蓝书例题,传递…

软硬链接与动静态库

文章目录 1.软硬链接2.动态库和静态库2.1 见一见库2.2 动静态库2.2.1 静态库2.2.2 动态库 2.3 动静态库的对比 3.真实的应用场景(ncurses库)4.库加载---可执行程序和地址空间4.1可执行程序的加载4.2 库的加载 1.软硬链接 2.动态库和静态库 2.1 见一见库 我们用过很多库。C/C的…

如何节约上架时间,小程序管理平台推荐

继微信正式推出微信小程序后,各个大厂陆续发布了各自的小程序平台 —— 支付宝小程序、百度小程序、头条小程序,各家不同的小程序标准一度让开发者们激情开骂,虽然目前跨平台的小程序开发可以通过taro、mpvue、kbone等跨平台开发框架来解决&a…

车载摄像头智能颜色校正解决方案,卓越画质新体验

随着智能交通和自动驾驶技术的快速发展,车载摄像头作为车辆感知外界环境的重要部件,其画面质量对于行车安全和用户体验至关重要。然而,由于光线变化、设备差异以及拍摄环境复杂多变,车载摄像头拍摄的画面往往会出现颜色失真、对比…

管理 nodejs 版本工具 nvm

nvm 方便切换不同版本的 node 及 对应的 npm 版本 一、安装nvm nvm官网 &#xff08;内含下载的文件&#xff0c;点击进去下载&#xff0c;并按照 网站文档步骤 操作即可&#xff09; 二、nvm 基础命令 nvm arch&#xff1a;显示node是运行在32位还是64位。nvm install <…

32.5k star!发现一个新的 API 调试工具!postman 要被替换了【文末有项目源码】

在软件开发过程中&#xff0c;API&#xff08;应用程序接口&#xff09;扮演着至关重要的角色。为了确保 API 的可靠性和性能&#xff0c;开发人员需要一种高效的方式来测试和调试它们。这方面的工具&#xff0c;大家经常用到的应该就是 postman 了。不过&#xff0c;今天想要给…

[Qt网络编程]之获取基本网络信息

前言 获取主机的网络地址和接口信息是进行网络编程的第一步&#xff0c;也是网络编程的基础。Qt提供了网络接口类 QNetworkInterface、网络地址人口类 QNetworkAddressEntry 和主机地址类 QHostAddress 来获取和使用地址信息。其中网络接口类 QNetworkInterface 描述了主机的卫…

短信防刷之滑动验证码

前言&#xff1a;最近想写一个滑动验证码&#xff0c;前台的样式虽然很好看&#xff0c;但是并不安全&#xff0c;网上也都是一些demo&#xff0c;不是前后台分离的&#xff0c;然后就自己查资料&#xff0c;自己来完成了 滑动验证码 一、为什么要使用滑动验证码 首先&#x…

斯坦福大学2024年人工智能发展和前景全面分析报告

2024 年指数是斯坦福大学迄今为止最全面的指数&#xff0c;恰逢人工智能对社会的影响力达到前所未有的重要时刻。今年&#xff0c;斯坦福大学扩大了研究范围&#xff0c;更广泛地涵盖人工智能的技术进步、公众对该技术的看法以及围绕其发展的地缘政治动态等基本趋势。 完整详细…

onedrive 清理文件历史版本 节省空间

onedrive 清理文件历史版本以节省空间的操作步骤 起因&#xff1a; 用的好好的onedrive高校教育版&#xff0c;突然在2024年4月2日晚上把空间从1T回收到100G&#xff0c;然后文件爆满&#xff0c;虽然没有把文件都给我删了&#xff0c;但是可能几个月窗口期过去就没文件了。而…

2024年——区块链技术进入全新高度

BTC生态蓬勃发展&#xff0c;以太坊的L1和L2模块化重塑智能合约生态。RAAS&#xff08;区块链即服务&#xff09;、Depin、并行EVM等技术的崛起&#xff0c;为区块链应用提供了更高的性能和可扩展性。以太坊再质押成为焦点。技术创新与日俱进&#xff0c;一同探索这个充满活力的…

KVM部署

1、检查虚拟化支持 首先&#xff0c;确认你的系统处理器支持硬件虚拟化&#xff0c;在Linux终端中&#xff0c;使用以下命令&#xff1a; egrep -c (vmx|svm) /proc/cpuinfo2、安装KVM及其工具 yum update yum install qemu-kvm libvirt libvirt-python libguestfs-tools vi…

10-菜刀连接木马

找到了漏洞后&#xff0c;并且上传了木马之后才能使用的两款工具 中国菜刀和冰蝎 想办法获取别人的cookie&#xff0c;cookie中有session-id 一、中国菜刀 1、必须提前已经完成木马植入然后才能使用 2、木马必须是POST请求&#xff0c;参数自定义&#xff0c;在菜刀里给出…

机器学习与深度学习 --李宏毅(笔记与个人理解)Day 20

Day 20 RNN 2 实际使用和其他应用 在实际的学习&#xff08;training&#xff09;过程中是如何工作的&#xff1f; step 1 Loss step 2 training Graindent Descent 反向传播的进阶版 – BPTT CLIpping 设置阈值~ 笑死昨天刚看完关伟说的有这玩意的就不是好东西 Why&#xff1…

C语言趣味代码(一)

C语言相关知识点的博客和大家分享完了&#xff0c;接下来我想开始数据结构相关的博客&#xff0c;在此之前呢&#xff0c;有的小伙伴问过我学完C语言的相关知识&#xff0c;我能干些什么呢&#xff1f;只有刷题吗&#xff1f;这不禁让我反思&#xff1a;在我们学习的过程中&…

远程DCS监控

在数字化、智能化的浪潮中&#xff0c;工业控制系统正迎来前所未有的变革。分布式控制系统&#xff08;DCS&#xff09;作为工业自动化领域的核心&#xff0c;其稳定运行对于企业的生产效率和安全至关重要。而远程DCS监控作为实现工业自动化、智能化管理的关键一环&#xff0c;…

【wpf】ObservableCollection 跨线程报错问题

背景 ObservableCollection 我们之前介绍过他和List的区别。ObservableCollection 的好处在于&#xff0c;当集合发生变化时&#xff0c;能发送通知通知界面发生相应的更改。但是ObservableCollection 有个弊端。无法在非UI线程中访问。 要么就是通知失效了&#xff0c;要么就…

MySQL修改数据表的结构

创建数据库 -- create database 创建的数据库名; create database test; 这里创建了一个名为 test 的数据库 选择需要使用的数据库 -- use 数据库名; use test; 这里使用 test 数据库 创建数据表 -- create table 表名(字段名1 数据类型(长度) 约束,字段名2 数据类型(长…

【强化学习的数学原理-赵世钰】课程笔记(九)策略梯度方法(Policy Gradient Method)

目录 一.policy gradient 的基本思路&#xff08;Basic idea of policy gradient&#xff09; 二.定义最优策略的 metrics&#xff0c;也就是 objective function 是什么 三.objective function 的 gradient 四.梯度上升算法&#xff08;REINFORCE&#xff09; 五.总结 上…