当前位置: 首页 > news >正文

缓存相关知识点

缓存的优点

1、减少不必要的数据传输,节省带宽

2、减轻服务器负担,提升网站性能

3、加快客户端网页加载速度

4、用户体验更好

缺点

如果资源发生更改,客户端不及时更新会导致用户获取信息滞后

缓存类型

分为强缓存(本地缓存)和弱缓存(又称协商缓存)

浏览器在向服务器第一次发起请求某资源时,服务端就会在respose的header内对该资源做缓存配置。缓存的时间和类型都是由服务端控制。

当浏览器再次向该资源发起请求时,首先会去获取该资源第一次请求时缓存的响应报文的header信息,判断是否命中强缓存和expries信息,若命中,直接从缓存中获取资源信息,本次请求根本就不会与服务器通信。

如果未命中,浏览器就发送请求到服务器,请求会携带第一次请求返回的响应报文的header信息,由服务器根据这个header信息来比对服务器端的的信息,判断是否命中协商缓存。如果命中,服务器返回新的响应header信息,并更新缓存中对应的header信息,但是并不会返回资源内容,而是告诉浏览器可以直接从缓存中获取,否则返回最新的资源内容。

有关强缓存的header字段

1、expries

这是http1.0的规范,它的值是一个绝对时间的GMT格式的时间字符串,如果请求的时间在expries之前,那么本地缓存始终有效,否则会发送请求到服务器获取资源。

2、cache-control

这是http1.1时出现的header信息,主要利用该字段的max-age值来判断,它是一个相对时间。资源第一次请求得时间和max-age的有效时间,计算出一个资源过期时间。把请求时的时间拿来与这个时间比较,如果请求时间在过期时间之前,就能命中缓存,否则就不行。

cache-control除了max-age外,还有几个常用值。

2.1、no-cache:不使用本地缓存,需要使用协商缓存。先与服务器确认第一次请求返回的响应是否被修改,如果之前header中存在Etag,那么请求得时候会与服务器验证,如果资源未被修改则可以避免重新下载

2.2、no-store:禁止浏览器缓存数据,每次客户端请求该资源,都会向服务器发送一个请求,每次都会下载完整资源

2.3、public:可以被所有用户缓存,包括终端用户和cdn等中间代理服务器

2.4、private:只能被终端用户缓存

注意:

如果cache-control与expries同时存在时,强缓存cache-control优先级高

协商缓存有关的header字段

协商缓存是由服务器来确定缓存资源是否可用,见名之意,“协商”就是两个人之间交流一个方案,这里的双方就是客户端和服务器,因此客户端和服务端需要某种标识来进行通信,从而让服务器判断请求资源是否可以访问缓存,涉及两组header字段。

这两组字段成对存在,第一次请求资源得到的响应报文中header字段中如果存在Last-Modified,则后续请求时就会带上if-Modified-Since请求字段;如果一次请求资源得到的响应报文中header字段中是Etag,那么再次请求时则会带上if-None-Match字段。

Last-Modified和if-Modified-Since   Etag和if-Node-Match这两对是一一对应的。

1、Last-Modified和if-Modified-Since

两者的值都是GMT格式的时间字符串

浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的时候,在reponse的header加上了Last-Modefied,它的表示这个资源在服务器上最后修改的时间;

浏览器再次跟服务器请求这个资源的时候,在request的header加上if-Modified-Since,它的值就是上一次请求时返回的Last-Modefined的值。

服务器再次收到资源请求时,根据浏览器传过来的if-Modified-Since的值和服务器上最后修改时间判断资源是否变化,如果没有变化返回304 Not Modified,但是不会返回资源内容,如果有变化就返回资源内容。

当服务器返回304状态的时候,response的header中不会再添加Last-Modified,因为资源没有改变,那么Last-Modified也不会改变,当浏览器收到304的响应时,就会从缓存中获取资源。

如果协商缓存没有命中,浏览器从服务器加载资源时,Last-Modified的值会被重新更新并加在response的header上返回给客户端,下次请求时if-Modified-Since的值就会启动上次请求返回的Last-Modified的值。

2、Etag和if-None-Match

这两个值是由服务器生成的每个资源的唯一标识字符串,只要资源有变化这个值就会改变;其判断过程与 Last-Modified、If-Modified-Since类似,与 Last-Modified 不一样的是,当服务器返回304的时候, 由于Etag重新生成过,response header会把这个Etag返回,即使这个Etag跟之前的没有变化。

Modified与ETag可以一起使用,服务器会优先验证ETag, 一致的情况下才会比对Last-Modifed

补充:

HTTP1.1新增的Etag,是为了解决几个Last-Modified难以解决的问题:

1、一些文件可能会发生周期性的更改,但是内容并没有发生变化(仅仅改变的修改时间),这个时候我们并不希望客户端认为我们修改了,而从新返回资源。

2、某些文件修改非常频繁,比如在秒以下的时间内进行修改,这种修改无法判断,某些服务器不能精确得到这个文件的最后修改时间。

这时可以利用Etag能够更加精确的控制缓存。

缓存相关的技术

前端的三种缓存技术:cookie、localStorage、sessionStorage(后两者是h5的时候新出的两种前端缓存技术)

localStorage、sessionStorage、cookie三者的区别

(1)存储大小

cookie数据大小不能超过4k ;

sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大;

(2)有效时间

localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;

sessionStorage 数据在当前浏览器窗口关闭后自动删除;

cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭;

(3)数据与服务器之间的交互方式

cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端;

sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存;

(4)作用域

localStorage的作用域限制在文档源的;

localStorage同源的文档之间可以相互访问和修改相同名称的数据;

localStorage受浏览器厂商的限制,chrome下存储的数据,360浏览器下不可访问; 会得到‘Invalid Date’;

sessionStorage在localStorage的同源策略基础之上,还有更严格的限制:

他还被限制在窗口中,意思是同一个窗口或标签页的不同页面之间可以共享sessionStorage;

但是不同的窗口或标签页之间不能共享sessionStorage,即便他们是同一个页面地址;

这里的窗口是顶级窗口,如果里面有多个iframe,他们之间共享sessionStorage;
 

相关文章:

  • MyBatis映射配置文件结构、标签详解及SQL语句中参数的获取
  • 【SQL刷题】DAY22----增删改操作专项练习
  • 真实场景下的安全专家各项技能详解
  • 为何以太坊合并很重要?
  • 【docker】使用docker安装宝塔面板
  • 【正点原子STM32连载】第四十一章 无线通信实验 摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
  • C语言 哈希表的简单实现
  • 学习率和BatchSize对模型的影响
  • 小代码大智慧: FilenameUtils.getName 函数分析
  • 基于php理发店管理系统
  • Linux入门之使用 firewalld 防火墙
  • 【论文阅读】SABRE: Protecting Bitcoin against Routing Attacks
  • 【设计模式3_责任链、观察者】
  • .NET MVC之AOP
  • 机器学习基础
  • 【个人向】《HTTP图解》阅后小结
  • 0基础学习移动端适配
  • 2018天猫双11|这就是阿里云!不止有新技术,更有温暖的社会力量
  • Angular Elements 及其运作原理
  • avalon2.2的VM生成过程
  • JAVA 学习IO流
  • Java面向对象及其三大特征
  • 百度小程序遇到的问题
  • 力扣(LeetCode)56
  • 利用DataURL技术在网页上显示图片
  • 聊聊spring cloud的LoadBalancerAutoConfiguration
  • 面试题:给你个id,去拿到name,多叉树遍历
  • scrapy中间件源码分析及常用中间件大全
  • # MySQL server 层和存储引擎层是怎么交互数据的?
  • #{}和${}的区别?
  • #NOIP 2014#Day.2 T3 解方程
  • $(selector).each()和$.each()的区别
  • (20)目标检测算法之YOLOv5计算预选框、详解anchor计算
  • (阿里云万网)-域名注册购买实名流程
  • (论文阅读30/100)Convolutional Pose Machines
  • (没学懂,待填坑)【动态规划】数位动态规划
  • (使用vite搭建vue3项目(vite + vue3 + vue router + pinia + element plus))
  • (学习日记)2024.04.10:UCOSIII第三十八节:事件实验
  • (原)记一次CentOS7 磁盘空间大小异常的解决过程
  • (转)人的集合论——移山之道
  • (转载)虚函数剖析
  • ******IT公司面试题汇总+优秀技术博客汇总
  • *p++,*(p++),*++p,(*p)++区别?
  • .gitignore文件---让git自动忽略指定文件
  • .NET Core 控制台程序读 appsettings.json 、注依赖、配日志、设 IOptions
  • .net MVC中使用angularJs刷新页面数据列表
  • .net中我喜欢的两种验证码
  • /proc/interrupts 和 /proc/stat 查看中断的情况
  • @Data注解的作用
  • [2016.7.Test1] T1 三进制异或
  • [2021]Zookeeper getAcl命令未授权访问漏洞概述与解决
  • [AIGC] Kong:一个强大的 API 网关和服务平台
  • [Big Data - Kafka] kafka学习笔记:知识点整理
  • [Docker]五.Docker中Dockerfile详解
  • [Head First设计模式]策略模式