强缓存和协商缓存原理,及前端如何和服务端一同控制影响浏览器缓存,以及代码实战

1.强缓存(也称为本地缓存)和协商缓存是Web开发中用于优化页面加载性能的两种主要缓存机制。
  1. 强缓存:
    • 工作原理: 当客户端首次请求资源时,服务器会返回带有缓存控制信息的响应头,如Cache-ControlExpires。这些信息告诉客户端可以在一定时间内直接使用本地缓存而不需要向服务器发起请求。
    • Cache-Control: 使用max-age指定资源的最大缓存时间,例如Cache-Control: max-age=3600表示资源在3600秒内有效。
    • Expires: 指定资源的过期时间,是一个GMT格式的日期字符串,如Expires: Wed, 29 Feb 2024 12:00:00 GMT
    • 优点: 加快页面加载速度,减轻服务器负担。
  2. 协商缓存:
    • 工作原理: 当客户端再次请求资源时,它会发送一个请求头,如If-Modified-SinceIf-None-Match,携带上一次请求时服务器返回的相关信息。服务器根据这些信息判断是否需要返回新的资源,或者告诉客户端直接使用本地缓存。
    • Last-Modified: 服务器在响应头中返回资源的最后修改时间,客户端可通过If-Modified-Since发送上一次获取资源时的修改时间。
    • ETag: 服务器在响应头中返回资源的唯一标识,客户端可通过If-None-Match发送上一次获取资源时的标识。
    • 优点: 减少不必要的数据传输,提高服务器性能。
2.怎么使用

很多前端人看了这些东西,只知道原理,但是完全不知道如何去使用,下面我把强缓存和协商缓存的所有写法都列举出来,并附上相关的解释

1. 强缓存:
a. 使用 Cache-Control 字段的 no-store 指令,表示不缓存:
fetch('/path/to/resource', {method: 'GET',headers: {'Cache-Control': 'no-store'}
}).then(response => response.text()).then(data => {// 处理获取到的数据}).catch(error => {console.error('Error:', error);});
b. 使用 Cache-Control 字段的 no-cache 指令,表示不直接使用缓存,需要向服务器验证:
fetch('/path/to/resource', {method: 'GET',headers: {'Cache-Control': 'no-cache'}
}).then(response => response.text()).then(data => {// 处理获取到的数据}).catch(error => {console.error('Error:', error);});
c. 使用 Cache-Control 字段的 max-age 指令,设置缓存最大有效时间:
fetch('/path/to/resource', {method: 'GET',headers: {'Cache-Control': 'max-age=3600' // 缓存1小时}
}).then(response => response.text()).then(data => {// 处理获取到的数据}).catch(error => {console.error('Error:', error);});
d. 使用 Expires 字段,设置缓存过期时间:
fetch('/path/to/resource', {method: 'GET',headers: {'Expires': new Date(Date.now() + 3600000).toUTCString() // 缓存1小时}
}).then(response => response.text()).then(data => {// 处理获取到的数据}).catch(error => {console.error('Error:', error);});
2. 协商缓存:
a. 使用 If-None-Match 字段,携带上一次服务器返回的ETag值:
fetch('/path/to/resource', {method: 'GET',headers: {'If-None-Match': 'previous-etag-value'}
}).then(response => {if (response.status === 304) {// 服务器返回 304 表示资源未被修改,可以使用缓存return getCachedData();} else {return response.text();}}).then(data => {// 处理获取到的数据}).catch(error => {console.error('Error:', error);});
b. 使用 If-Modified-Since 字段,携带上一次服务器返回的Last-Modified值:
fetch('/path/to/resource', {method: 'GET',headers: {'If-Modified-Since': 'previous-last-modified-value'}
}).then(response => {if (response.status === 304) {// 服务器返回 304 表示资源未被修改,可以使用缓存return getCachedData();} else {return response.text();}}).then(data => {// 处理获取到的数据}).catch(error => {console.error('Error:', error);});
3.协商缓存使用的这些值,是如何判断他是不是要缓存呢

协商缓存是通过比较客户端发送的条件请求头(例如 If-None-MatchIf-Modified-Since)与服务器上资源的相关信息来判断是否要返回新的资源还是告诉客户端继续使用缓存的一种机制。

  1. ETag(实体标签):
    • 服务器在响应头中生成一个唯一的标识符(通常是哈希值),称为ETag。
    • 当客户端再次请求资源时,它会携带上一次获取的ETag值,放在请求头的 If-None-Match 字段中。
    • 服务器比较客户端提供的ETag值与当前资源的ETag值,如果匹配,服务器返回状态码304,表示资源未被修改,可以使用缓存。

Last-Modified(最后修改时间):

  • 服务器在响应头中提供资源的最后修改时间。
  • 当客户端再次请求资源时,它会携带上一次获取的最后修改时间,放在请求头的 If-Modified-Since 字段中。
  • 服务器比较客户端提供的最后修改时间与当前资源的最后修改时间,如果客户端提供的时间早于资源的最后修改时间,服务器返回状态码304,表示资源未被修改,可以使用缓存。
总而言之,言而总之,这个缓存还是很复杂,只能从实际中慢慢去解析和进行开发了。

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

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

相关文章

nginx反向代理,获取客户端ip

一、获取客户端ip代码 /*** description: 获取客户端IP* return string*/ public static function getClientIp(){$ip ;if(getenv(HTTP_CLIENT_IP) && strcasecmp(getenv(HTTP_CLIENT_IP),unknown)){$ip getenv(HTTP_CLIENT_IP);}else if(getenv(HTTP_X_FORWARDED_F…

Delegate动画案例(P30 5.6delegate动画)

一、ListElement,ListModel,ListView 1. ListElement ListElement 是 QML 中用于定义列表项的元素。它可以包含多个属性,每个属性对应列表项中的一个数据字段。通过在 ListModel 中使用 ListElement,可以定义一个列表的数据模型…

算法D29 | 回溯算法5|491.递增子序列 46.全排列 47.全排列 II

491.递增子序列 本题和大家刚做过的 90.子集II 非常像,但又很不一样,很容易掉坑里。 代码随想录 视频讲解:回溯算法精讲,树层去重与树枝去重 | LeetCode:491.递增子序列_哔哩哔哩_bilibili 一个是去重,一…

在WPF MVVM 框架下实现DataGrid内容的增删查改

在WPF应用程序开发中,使用DataGrid控件来展示和编辑数据是一种常见的做法。Prism是一个模块化的WPF应用程序框架,它支持MVVM模式,使得实现数据操作和界面展示的分离变得更加容易。本文将指导您如何在使用Prism框架的WPF应用程序中实现DataGri…

【leetcode】链表分割

大家好,我是苏貝,本篇博客带大家刷题,如果你觉得我写的还不错的话,可以给我一个赞👍吗,感谢❤️ 目录 方法1. 不用哨兵位方法2. 用哨兵位 点击查看题目 思路: 将链表分为2个链表list1和list2,…

忙碌生活下的技术适应力:应对新应用学习带来的困扰与挑战

在当今信息时代,各类应用程序(APP)渗透到我们生活的方方面面,无论是工作效率提升,还是日常生活便利,都离不开它们的支持。然而,对于在快节奏工作中疲于奔命的现代人来说,当因为生活所…

GO语言学习笔记(与Java的比较学习)(七)

结构与方法 结构体定义 结构体定义的一般方式如下: type identifier struct {field1 type1field2 type2... } type T struct {a, b int} 也是合法的语法,它更适用于简单的结构体。 结构体里的字段都有 名字,像 field1、field2 等&#…

linux服务器连接数

一、要查看 Linux 服务器的最大连接数 我们需要关注两个值:文件描述符限制(file descriptor limit)和内核参数 "net.core.somaxconn"。 1. 查看文件描述符限制(file descriptor limit) 文件描述符限制决定了…

System Verilog学习笔记(十)——任务和函数

System Verilog学习笔记(十)——任务和函数 函数(function)和任务(task)可以提高代码的复用性和整洁度。他们的目的在于将大型的过程块切分为更小的片段,而便于阅读和代码维护。 区别 functi…

物联网边缘计算云边协同

文章目录 一、物联网云边协同1.IoT云边协同设计2.物联网平台设计3.物联网平台实现 二、部署环境1.节点配置2.版本信息 三、IoT云边协同部署1.部署Kubernetes集群2.部署KubeEdge3.部署ThingsBoard集群4.部署Node-RED边缘网关4.1.边缘网关功能4.2.部署EMQX4.2.部署Node-RED 5.配置…

(正规api接口代发布权限)短视频账号矩阵系统实现开发--技术全自动化saas营销链路生态

短视频账号矩阵系统实现开发--技术全自动化saas营销链路生态源头开发(本篇禁止抄袭复刻) 一、短视频矩阵系统开发者架构 云罗短视频矩阵系统saas化系统,开发层将在CAP原则基础上使用分布式架构,对此网站的整体架构采用了基于B/S三层架构模式…

React 模态框的设计(五)主体设计

弹窗的主体设计没什么特别,就是把细分化后的各个功能封装在一个个的小组件内,然后再整合。这样逻辑就分开了,不乱。 弹窗容器 这个容器是弹窗主体的根组件(不含遮罩),要能根据主题的变化能做出相应的改变。还要记录渲染后的主体…

java016学习记录

Java Web 使用 Java 开发语言完成 Web 后端的项目开发 基于 Web 的应用:网站、APP、小程序 Java 不是做前端的,做后端 Tomcat、Servlet Tomcat 的作用让 Java Web 程序可以正常运行,被浏览器访问 浏览器默认不能访问电脑上的资源&#…

Django Web架构:全面掌握Django模型字段(下)

Django Web架构 全面掌握Django模型字段(下) - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article…

C++之vector

1、vector概念 功能:vector的功能和数组非常相似,可以看成是一个升级版的数组。 vector和普通数组的区别: (1)数组是静态的,长度不可改变,而vector可以动态扩展,增加长度。…

协议和序列化反序列化

“协议”和序列化反序列化 “协议”的概念: “协议”本身是一种约定俗成的东西,由通讯双方必须共同遵从的一组约定,因此我们一定要将这种约定用计算机语言表达出来,此时双方计算机才能识别约定的相关内容 我们把这个规矩叫做“…

机器学习|决策树

左图的点是一种线性不可分的情况,无法拿一条直线去将进行分开。 每一个节点都代表一个决策,从而导致节点的分流。 最终的目标肯定是要达到分类。 但取得目标的过程是有所谓的好坏。 而这个好坏用熵/信息增益来衡量。 熵是一种用于反映系统混乱程度的物理…

思科网络设备监控

思科是 IT 行业的先驱之一,提供从交换机到刀片服务器的各种设备,以满足中小企业和企业的各种 IT 管理需求。管理充满思科的 IT 车间涉及许多管理挑战,例如监控可用性和性能、管理配置更改、存档防火墙日志、排除带宽问题等等,这需…

Makefile从入门到项目编译实战(学习笔记)

1.make和makefile介绍 1. make make 是一个应用程序,位于 /usr/bin/make 目录下,make 有如下的功能: (1)解析源程序之间的依赖关系 (2)根据依赖关系自动维护编译工作 (3&#xff09…

Jmeter插件PerfMon Metrics Collector安装使用及报错解决

Jmeter作为一个轻量级的性能测试工具,开源、小巧、灵活的特性使其越来越受到测试人员喜爱。在实际的项目中,特别是跨地区项目,排除合作方指定要求使用Loadrunner作为性能测试工具外,Jmeter会是首选。 本篇文章,就着重…