浏览器缓存(强缓存、协商缓存)

一、浏览器缓存

这一点主要解析浏览器缓存以及缓存机制的详细过程。

与缓存相关的状态码:

200 ok    从浏览器下载的最新资源
200 (from memory cache)    不进行http请求,直接从浏览器内存中读取的资源,页面关闭,则资源释放,一般一些脚本、图片、文字等会存在内存中
200 (from disk cache)    不进行http请求,直接从磁盘中读取的资源,页面关闭,资源仍然存在,除非清除缓存,一般一些非脚本文件会存在磁盘中,例如html、css文件
304 (not modified)    请求了服务器,但是由于服务器资源没有更新,所以仍使用内存中的资源
缓存相关的http header介绍:

http header    介绍
cache-control    response header or request header;指定缓存机制,优先级最高
expires    response header or request header;指定缓存的过期时间(现在浏览器一般设置cache-control,设置expires是为了兼容http1.0)
last-modified    response header;资源的最后修改时间
etag    response header;资源的唯一标识符
if-modified-since    request header;缓存的服务器资源的最后修改时间
if-none-match    request header;缓存的服务器资源的唯一标识
1.1强缓存:
不会进行http请求,读取的是内存中的资源,直到缓存失效

涉及到的状态码:

200(from memory cache)
200(from disk cache)
涉及到的http header: 

cache-control
expires
当浏览器对某个资源的请求命中了强缓存时,返回的http状态码为200,在chrome开发者工具中的network中的size会显示from cache

强缓存时利用Expires或者Cache-Control这两个http header实现的,都用来表示资源在客户端缓存的有效期

Expires是http1.0提出的一个header,描述的是一个绝对时间,由服务器返回,用GMT格式的字符串表示,如Exprires:Thu,31 Dec 2037 23:55:55 GMT

缓存过程:

1、浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在response的header加上Expires的header

2、浏览器在接收到这个资源后,会把这个资源连同所有的response header一起缓存下来,所以缓存命中的请求返回的header并不是来自服务器,而是来自之前缓存的header

3、浏览器再请求这个资源时,先从缓存中寻找,找到这个资源后,拿出Expires跟当前的请求时间比较,如果请求时间在Expires指定的时间之前,就能命中缓存,否则就不行。

4、如果缓存没有命中,浏览器直接从服务器加载资源时,Expires Header在重新加载的时候会被更新

Expires是服务器返回的一个绝对时间,在服务器时间与客户端时间相差较大时,缓存管理容易出现问题,比如随意修改下客户端时间,就能影响缓存命中的结果,所以在http1.1的时候,提出了一个新的header,也就是Cache-Control,这是一个相对时间,在进行缓存命中的时候,都是利用客户端时间进行判断,因此更有效安全一些,在配置缓存的时候,以秒为单位,用数值表示:如:Cache-Control:max-age=315360000,它的缓存过程是:

1、浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在response的header加上Cache-Control的header

2、浏览器在接收到这个资源的时候,会把这个资源连同所有response header一起缓存下来

3、浏览器再次请求这个资源的时候,先从缓存中寻找,找到这个资源之后,再拿这个过期时间跟当前的请求时间比较,如果请求时间在过期时间之前,就能命中缓存,否则就不行。

4、如果缓存没有命中,浏览器直接从服务器加载资源时,Cache-Control在重新加载的时候会被更新

cache-control
优先级最高,所有的缓存机制看到 cache-control 都要服从它;在请求头和响应头中都可以设置;cache-control有多种设置,设置如下:

cache-control    描述
no-store    请求和响应都不缓存(禁用)
no-cache    协商缓存,相当于cache-control:max-age=0(每次取之前先跟服务器沟通比较)
max-age    指定缓存内容将在xxx秒后失效
public    所有内容都将被缓存(客户端和代理服务器都可缓存)
private    所有内容只有客户端可以缓存,Cache-Control的默认取值
注意:这个header可以只用一个,也可以同时用两个,同时存在时,Cache-Control优先级高于Expires

1.2 强缓存的管理

两种方式来设置是否启用强缓存:

1、通过代码的方式,在web服务器返回的响应中添加Expires和Cache-Control Header

2、通过配置web服务器的方式,让web服务器在响应资源的时候统一添加Expires和Cache-Control Header

1.3 强缓存的应用

强缓存是前端性能优化最有力的工具,对于有大量静态资源的网页,一定要利用强缓存,提高响应速度,通常是为这些静态资源全部配置一个超时时间超长的Expires或Cache-Control,这样用户只会在第一次访问网站时加载静态资源,其他时间只要缓存没有失效并且用户没有强制刷新的条件下都会从缓存中加载。

然而这种缓存配置方式会带来一个问题,就是当资源更新时,客户端由于有缓存不会向服务器请求最新的资源,这个问题已有解决方案:

通过更新页面中引用的资源路径,让浏览器主动放弃缓存,加载新资源。

但要实现有更新的文件才需要浏览器重新加载,因此必须让url的修改与文件内容相关联,利用数据摘要算法对文件求摘要信息,摘要信息与文件内容一一对应,这一点许多前端构建工具都做到了,如webpack

1.4 浏览器默认缓存使开发环境下常因为资源没有及时更新而看不到效果

解决方法:

1、ctrl+F5

2、浏览器隐私模式开发

3、chrome开发者工具里将Disable cache选项打勾,阻止缓存

4、在开发阶段,给资源加上一个动态的参数,由于每次资源的修改都要更新引用的位置,同时修改参数的值,所以操作起来不是很方便,除非是在动态页面比如jsp里开发就可以用服务器变量来解决,或者用前端构建工具来处理这个参数修改的问题。

5、如果资源引用的页面被嵌入到了一个iframe里面,可以在iframe的区域右键重新加载该页面

6、如果缓存问题出现在ajax请求中,最有效的解决办法就是ajax的请求地址追加随机数

7、动态设置iframe的src时,有可能因为缓存问题导致看不到最新效果,在src后面添加随机数即可

8、通过前端开发工具grunt gulp等的插件来启动一个静态服务器,则在这个服务器下所有资源返回的response header中,Cache-Control始终被设置为不缓存

1.5 发布问题

发布问题:若页面和它引用的资源路径同时更新了,不管是先部署页面还是先部署资源都会带来各种问题,这是由于资源是覆盖式发布的,即用待发布资源覆盖已发布资源。

解决办法就是实现非覆盖式发布:把有修改的资源文件作为一个新的文件发布,不对已有的资源文件进行覆盖,这样用户还可以请求旧的资源文件,不至于发生页面错乱的问题,这样先部署静态资源,再覆盖式部署页面,等到用户访问新页面的时候,新的资源文件也已发布,就可以正确请求,即可解决问题。

2.1 协商缓存
涉及到的状态码:

304 not modified
200 ok
涉及到的请求头

etag / ig-none-match
last-modified / if-modified-since
如果命中协商缓存,请求响应返回的http状态为304以及一个Not Modified字符串,协商缓存利用的是【Last-Modified、If-Modified-Since】、【ETag、If-None-Match】这两对header来管理的。

【Last-Modified、If-Modified-Since】:

1、浏览器第一次跟服务器请求一个资源,服务器在返回这个资源时,在response的header加上Last-Modified的header,表示这个资源在服务器上的最后修改时间

2、浏览器再次向服务器请求这个资源时,在request的header加上If-Modified-Since的header,这个header的值就是上一次请求时返回的Last-Modified的值

3、服务器再次收到资源请求时,根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化,如果没有变化则返回304 Not Modified,但是不会返回资源内容,如果有变化就返回资源内容,当服务器返回304 Not Modified的响应时,response header中不会再添加Last-Modified的header,因为资源没有变化,Last-Modified的值也不变

4、浏览器收到304的响应后,就会从缓存中加载资源

5、如果协商缓存没有命中,浏览器直接从服务器加载资源时,Last-Modofied header在重新加载的时候会被更新,下次请求时,If-Modified-Since会采用上一次返回的Last-Modified的值

这一对header都是根据服务器时间返回的,有时候会有服务器资源有变化,但最后修改时间却没有变化的情况,因此有了

【Etag、If-None-Match】:

1、浏览器第一次向服务器请求一个资源,服务器在返回这个资源的同时,在response的header加上ETag的header,这个header是服务器根据当前请求的资源生成的一个唯一标识,是一个字符串,只要资源内容发生改变,这个字符串也会改变,跟时间没有关系

2、浏览器再次请求这个资源的时候,在request的header上加上If-None-Match的header。这个header的值是上一次请求返回的ETag的值

3、服务器再次收到资源请求时,根据客户端传过来的If-None-Match和重新生成的该资源的新的ETag做比较,相同则返回304 Not Modified,不会返回资源内容,如果不同则返回资源内容,但这里即使资源没有发生变化,也会返回ETag,因为这个ETag重新生成过,即使没有ETag没有变化

4、浏览器收到304响应后,就从缓存中加载资源

etag两种类型:

强etag:

不论实体发生多么细微的变化都会改变其值

强ETag表示形式:"22FAA065-2664-4197-9C5E-C92EA03D0A16"。

弱etag:

弱 ETag 值只用于提示资源是否相同。只有资源发生了根本改变产 生差异时才会改变 ETag 。这时,会在字段值最开始处附加 W/。

弱ETag表现形式:W/"22FAA065-2664-4197-9C5E-C92EA03D0A16"。

注意:当etag和last-modified同时存在时则以etag为准

2.2 协商缓存的管理

一般服务器上的【Last-Modified、If-Modified-Since】和【Etag、If-None-Match】会同时启用,协商缓存需要配合强缓存使用

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

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

相关文章

【攻防世界】bug

垂直越权IP绕过文件上传 文件上传绕过&#xff1a; 1. mime检测 2. 大小写绕过 3. 等价替换&#xff08;php5&#xff0c;php3&#xff09; 4. 利用JavaScript执行php代码&#xff08;正常的php代码会被检测到&#xff0c;所以就用JavaScript来执行&#xff09; <script lan…

Linxu vim详解(常用命令)

目录 强烈建议全文阅读&#xff01; vim是什么&#xff1f; 命令模式 底行模式&#xff1a;shift &#xff1b; 普通用户无法sodu&#xff1f; vim配置问题&#xff1a;&#xff08;一点都不重要&#xff09; vim是什么&#xff1f; Vs 2022是一款集成开发软件 vim是一…

记录一下MySQL8版本更改密码规则

#查看当前密码策略 show variables like validate_password%;#修改密码等级为low set global validate_password.policy LOW; #注意MySQL8版本这是点&#xff0c;不是_#修改密码长度为6 set global validate_password.length 6;#查询我的数据库中user表host和user select host,…

[C++][算法基础]SPFA求负权边(Dijkstra优化)

给定一个 n 个点 m 条边的有向图&#xff0c;图中可能存在重边和自环&#xff0c; 边权可能为负数。 请你判断图中是否存在负权回路。 输入格式 第一行包含整数 n 和 m。 接下来 m 行每行包含三个整数 x,y,z&#xff0c;表示存在一条从点 x 到点 y 的有向边&#xff0c;边长…

康耐视visionpro-CogFindCircleTool操作工具详细说明

◆CogFindCircleTool]功能说明: 通过用多个卡尺找到多个点来拟合所要找的圆 ◆CogFindCircleTool操作说明: ①.打开工具栏,双击或点击鼠标拖拽添加CogFindCircleTool工具 ②.添加输入图像,右键“链接到”或以连线拖拽的方式选择相应输入源 ③预期的圆弧:设置预期圆弧的…

消除 BEV 空间中的跨模态冲突,实现 LiDAR 相机 3D 目标检测

Eliminating Cross-modal Conflicts in BEV Space for LiDAR-Camera 3D Object Detection 消除 BEV 空间中的跨模态冲突&#xff0c;实现 LiDAR 相机 3D 目标检测 摘要Introduction本文方法Single-Modal BEV Feature ExtractionSemantic-guided Flow-based AlignmentDissolved…

基于Spring Boot实现的图书个性化推荐系统

基于Spring Boot实现的图书个性化推荐系统 开发语言&#xff1a;Java语言 数据库&#xff1a;MySQL工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统实现 前台首页功能模块 学生注册 登录 图书信息 个人信息 管理员功能模块 学生管理界面图 图书分类管理界面图 图书信息管…

A17 STM32_HAL库函数 之 GPIO扩展驱动程序所有函数的介绍及使用

A1 STM32_HAL库函数 之 HAL系统驱动程序所有函数的介绍及使用 1 该驱动函数预览1.1 HAL_GPIOEx_ConfigEventout1.2 HAL_GPIOEx_EnableEventout1.3 HAL_GPIOEx_DisableEventout 该文档修改记录&#xff1a;总结 1 该驱动函数预览 序号函数名描述1HAL_GPIOEx_ConfigEventout()配…

基于R语言实现的负二项回归模型【理解与实现】-理解负二项回归模型和泊松回归模型之间的区别

前言 我们可以在R语言中使用MASS包中的glm.nb函数来拟合负二项模型&#xff0c;以及使用glm函数来拟合泊松模型。以下是一个详细的过程&#xff0c;包括模拟数据的生成、模型的拟合、结果的比较和解释。 需要的包 if (!require("MASS")) install.packages("M…

WPF中Binding的原理和应用

WPF中Binding的原理和应用 在WPF中&#xff0c;Binding机制是实现数据与界面的连接和同步的重要工具。了解Binding的原理和应用&#xff0c;对于开发人员来说是非常重要的。本文将详细介绍WPF中Binding的原理和应用&#xff0c;帮助读者更好地理解和运用这一强大的机制。 Bin…

Qt:发出一个信号,有多少相关槽函数执行?

返回连接signal的接收者的个数。 因为信号和槽都能作为信号的接收者&#xff0c;同时相同的连接能被建立很多次&#xff0c;接收者的数量和与该信号建立连接的数量相同。 当调用该函数时&#xff0c;你能使用SIGNAL()宏来传递一个特定的信号&#xff1a; if (receivers(SIGNA…

gitlab:Could not resolve host

fatal: unable to access http://xxx.git/: Could not resolve host: yyy Git-fatal: unable to access ‘https://gitlab.XX.git/‘: Could not resolve host: gitlab.XX.com.cn_drone unable to access .git/: could-CSDN博客 原因&#xff1a; 克隆的时候使用的是这里的HTT…

实现(图像、视频等)数据上云存储

实现&#xff08;图像、视频等&#xff09;数据上云存储 实现&#xff08;图像、视频等&#xff09;数据上云存储通常涉及以下几个步骤&#xff1a; 选择云存储服务商&#xff1a; 根据您的需求、预算、地域覆盖、数据安全性、服务稳定性等因素&#xff0c;选择一家合适的云存储…

QT助手翻译【QT 5.14】 -----QPushButton

目录 1 属性 2 公共职能 3 重新实现的公共功能 4 公用插槽 5 受保护的功能 6 保护方法 7 详细说明 1 属性 自动默认值&#xff1a;bool 此属性保存按钮是否为自动默认按钮 如果此属性设置为true&#xff0c;则该按钮为自动默认按钮。 在某些GUI样式中&a…

题目:有n个整数,使其前面各数顺序向后移m个位置,最后m个数变成最前面的m个数

题目&#xff1a;有n个整数&#xff0c;使其前面各数顺序向后移m个位置&#xff0c;最后m个数变成最前面的m个数 There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence. The blog content is all pa…

Android之启动优化

不在 Application 初始化非必要的第三方库&#xff0c;尽量在使用的时候初始化&#xff0c;例如地图平台、播放器框架等这些可以在使用的时候再初始化。 启动优化误区&#xff1a; 启动页 Activity 的窗口背景采用透明色&#xff0c;由此来掩盖启动时卡白屏时间较长的问题&am…

面试题:Spring Cloud微服务架构下的服务发现、配置中心、负载均衡等组件介绍与配置

Spring Cloud微服务架构提供了一系列标准化的组件和服务&#xff0c;以帮助开发者更好地构建和管理分布式微服务系统。以下是对Spring Cloud中服务发现、配置中心和负载均衡三个核心组件的简介以及基本配置方式&#xff1a; ### 1. 服务发现 : 组件 : Spring Cloud Netfl…

13.多通道视频流缓存以及显示架构

1 简介 多通道视频流缓存以及显示架构是一个在数字图像处理中很基础也很重要的一个架构。在图像拼接以及高分辨率图像显示方面应用范围较为广泛。本文将介绍一个四通道的图像显示。可以四个图像信息输入以及拼接到一个显示屏里面。使用的开发板为A7 2 框架图 架构图如下图所示…

[Spring Cloud] (汇总)网关(Gateway)与微服务(SringBoot)搭建

因之前的项目接触到了gateway网关&#xff0c;故根据自己的理解重新实现了一套网关组件。并计划持续更新&#xff0c;为实现一步步搭建网关。 每个阶段的博客均有对版本的代码如下&#xff1a; 杉极简/gateway网关阶段学习 版本选择 选择目前最新的SpringBoot2.6.13作为基础。…

康耐视visionpro-CogBlobTool工具操作详细说明

CogBlobTool功能说明: 通过设置灰度值提取感兴趣区域,并分析所提取区域的面积、长宽等参数。 Cog BlobTool操作说明: .打开工具栏,双击或点击鼠标拖拽添加CogBlobTool工具 ②.添加输入图像:单击鼠标右键“链接到”或以连线拖拽的方式选择相应输入源 ③.极性: “白底黑点…