浏览器http缓存问题
一、什么是浏览器缓存
浏览器将请求过的资源(html、js、css、img)等,根据缓存机制,拷贝一份副本存储在浏览器的内存或者磁盘上。如果下一次请求的url相同时则根据缓存机制决定是读取内存或者磁盘上的数据还是去服务器请求资源文件
缓存通过url来判断,如果url不同则是新的资源。所以我们开发时前端会将一些js、css等文件在后面加hash值来避免资源更新时浏览器仍读取缓存文件,导致需要刷新才能获取新的资源的问题
这种做法虽然解决了js、css等文件的更新,这种加hash的就不在这篇文章说了,具体方法上网查即可,但是对于index.html这样的文件由于不能加hash值,则仍然会存在当资源更新了,但是仍然读取缓存文件的问题。
二、与缓存相关的状态码
| 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. 强缓存
不会进行http请求,读取的是内存中的资源,直到缓存失效
涉及到的状态码:
- 200(from memory cache)
- 200(from disk cache)
涉及到的http header:
- cache-control
优先级最高,所有的缓存机制看到 cache-control 都要服从它
强缓存:设置max-age在这个时间内都不进行http请求,从缓存中读取
| cache-control | 描述 |
| no-store | 请求和相应都不缓存 |
| no-cache | 协商缓存,相当于cache-control:max-age=0 |
| max-age | 指定多少秒后资源过期(强缓存) |
- expires
这个是为了兼容http1.0,由于客户端可以修改时间,所以,expires优先级低,缓存策略以cache-control为准
2. 协商缓存
在第一次请求服务器时,服务器会返回资源,并且返回一个资源的缓存标识,一起存到浏览器的缓存数据库。当第二次请求资源时,浏览器会首先将缓存标识发送给服务器,服务器拿到标识后判断标识是否匹配,如果不匹配,表示资源有更新,服务器会将新数据和新的缓存标识一起返回到浏览器;如果缓存标识匹配,表示资源没有更新,并且返回 304 状态码,浏览器就读取本地缓存服务器中的数据。
涉及到的状态码:
- 304 not modified
- 200 ok
涉及到的请求头
- last-modified (响应头)/ if-modified-since(请求头)
当浏览器第一次请求时,服务端返回资源的同时,会在响应头中添加last-modified,表示资源的最后修改时间,浏览器在第二次请求这个url时会在请求头中带上if-modified-since请求头,值为上一次请求的last-modified,用来询问该文件是否被修改过。
但是last-modified时间只能精确到秒,且无法识别出内容没有修改过的文件,只要修改时间变了就算变动,因此有了etag
- etag(响应头) / ig-none-match(请求头)
etag解决了last-modified的问题,当etag和last-modified同时存在时则以etag为准
nginx的etag计算方式:计算页面文件的最后修改时间,将文件最后修改时间的秒级Unix时间戳转为16进制作为etag的第一部分 计算页面文件的大小,将大小字节数转为16进制作为etag的第二部分。
etag两种类型:
强etag:
不论实体发生多么细微的变化都会改变其值
强ETag表示形式:"22FAA065-2664-4197-9C5E-C92EA03D0A16"。
弱etag:
弱 ETag 值只用于提示资源是否相同。只有资源发生了根本改变产 生差异时才会改变 ETag 。这时,会在字段值最开始处附加 W/。
弱ETag表现形式:W/"22FAA065-2664-4197-9C5E-C92EA03D0A16"。
浏览器第二次请求上次请求过的url时,浏览器会在HTTP请求头添加一个If-None-Match的标记,用来询问服务器该文件有没有被修改。
四、项目遇到的问题
- 项目上线后用户需手动刷新页面才能获取新的资源
产生原因:http请求没有设置缓存机制(cache-control或者expires),导致浏览器不知道以什么方式缓存。这种情况一般默认为强缓存,强缓存时间根据一定的计算方式获得,在这个时间段内不会进行网络请求,返回的状态码为200(from disk cache)或者200(from memory cache)
解决办法:
针对不能加hash值又想要随时获取最新资源的html文件,应该设置请求头 cache-control:no-cache,相当于cache-control:max-age=0
- 奇怪的问题与排查
现象:nginx并没有配置cache-control或者expires,但是有时却不需要刷新就可以返回最新的资源(200 ok),而有时则返回200 from disk cache。
排查:
查看http的header信息,发现差别在if-modified-sine这个请求头上,返回200 ok的请求头会携带if-modified-sine,而返回200 from disk cache的请起头中没有携带if-modified-sine。
查了一些资料终于找到原因,原因如下:
if-modified-sine的值是第一次报文中 last-modified 的值
为什么会有条件请求字段呢?是因为缓存过期了,所以浏览器会从缓存中查找是否有etag、last-modified字段(注意,缓存是缓存的整个报文,而不仅仅是body部分),有的话,就在请求中带上,向服务器发起协商缓存请求。如果服务器发现资源没有改变,就返回304响应,浏览器就知道,本地缓存中的这个数据资源可以继续使用。(304响应是没有body体的,只有头字段等元信息)也就是说,只有在缓存过期的情况下,请求报文中才会有条件请求的相关字段。什么情况下,缓存会过期呢?如下:
- cache-control: max-age=0
- cache-control: no-cache
- 响应报文根本就没有返回任何关于cache有效期的头字段: cache-control / expire / progma 。那么看是否返回了 last-modified ,如果有该header,浏览器可以使用 Heuristic 算法计算出一个通用的缓存时间 (Date - last-modified) * 10%
第三点原因就是项目中遇到的奇怪现象的解释。
文章借鉴:https://segmentfault.com/q/1010000007008829 浏览器缓存带来的前端项目更新问题及解决方法_浏览器缓存的数据,如果服务器的数据有变化怎么办-CSDN博客
相关文章:
浏览器http缓存问题
一、什么是浏览器缓存 浏览器将请求过的资源(html、js、css、img)等,根据缓存机制,拷贝一份副本存储在浏览器的内存或者磁盘上。如果下一次请求的url相同时则根据缓存机制决定是读取内存或者磁盘上的数据还是去服务器请求资源文件…...
结构化Prompt:让大模型更智能的秘诀
一、结构化提示词 1. 什么是结构化? 结构化: 对信息进行组织,使其遵循特定的模式和规则,从而方便有效理解信息。结构化的思想在各类文本中都得到了广泛应用,例如文章、书籍中都使用了标题、子标题、段落等语法结构。结构化 Prompt 的思维方…...
威联通NAS部署openwrt软路由保姆级教程附镜像文件
创作立场:原创不易,拒绝搬运~ hello 大家好,我是你们的老伙伴,稳重的大王~ 本期教程为大家分享,怎么在NAS里面部署软路由,下面是软路由的镜像文件,有两个版本,400M的是定制版~ Sh…...
《计算机网络(第7版)-谢希仁》期末考试复习题和答案(总结整理)
目录 前言: 一、选择题。 二、填空题。 三、名词解释。 四、简答题。 前言: 这个自动标题自己带了序号,一开始想全部选项和题号都改过来的,结果一看一百多个全是,懒得改了 一、选择题。 1、广域网覆盖的地理范围…...
windows和mac共享文件夹访问教程
mac共享文件夹,windows访问: mac上开启文件夹共享,并添加文件夹和用户,然后windows 上 在windows上快捷键 win r 打开运行,按如下格式输入mac设备的IP地址: 就可以访问了: windows共享文件夹…...
【PPTist】网格线、对齐线、标尺
前言:本篇文章介绍辅助我们摆放元素位置的几个功能 一、网格线功能 网格线主要是用来辅助我们对齐元素的,右键可以选择使用哪种网格线,以及关闭和打开 显示效果就是图中的这种效果。但是强迫症有点难受,它底部没对齐啊啊啊 不…...
Leetcode3218. 切蛋糕的最小总开销 I
题目描述: 有一个 m x n 大小的矩形蛋糕,需要切成 1 x 1 的小块。 给你整数 m ,n 和两个数组: horizontalCut 的大小为 m - 1 ,其中 horizontalCut[i] 表示沿着水平线 i 切蛋糕的开销。verticalCut 的大小为 n - 1 …...
ECCV-2024 | 指令不够用、大模型来生成!BEVInstructor:基于BEV感知和大模型的视觉语言导航指令生成
作者:Sheng Fan, Rui Liu, Wenguan Wang, and Yi Yang 单位:浙江大学 原文链接:Navigation Instruction Generation with BEV Perception and Large Language Models (https://link.springer.com/chapter/10.1007/978-3-031-726…...
【UE5.3.2 】引擎中安装RiderLink插件
Rider会提示你安装这个插件选择在引擎中安装 Running AutomationTool... Using bundled DotNet SDK version: 6.0.302 Starting AutomationTool... Parsing command line: BuildPlugin -Unversioned -Plugin=C:\Users\zhangbin\AppData\Local\...
【HarmonyOS 5.0】第十二篇-ArkUI公共属性(一)
一、公共样式类属性 ArkUI框架提供的基础组件直接或者间接的继承自 CommonMethod , CommonMethod 中定义的属性样式属于公共样式。下面就来学习这些样式 1.1.尺寸设置 宽高设置 设置组件的宽高,缺省时使用组件自身内容的宽高,比如充满父布…...
京准电钟解读,NTP网络授时服务器如何提升DCS系统效率
京准电钟解读,NTP网络授时服务器如何提升DCS系统效率 京准电钟解读,NTP网络授时服务器如何提升DCS系统效率 NTP 网络授时服务器为防火墙内的网络设备、终端、服务器提供准确、可靠和安全的高精度卫星时间参考,可为它支持数万台支持标准的网…...
4.银河麒麟V10(ARM) 离线安装 MySQL
1. 系统版本 [rootga-sit-cssjgj-db-01u ~]# nkvers ############## Kylin Linux Version ################# Release: Kylin Linux Advanced Server release V10 (Lance)Kernel: 4.19.90-52.39.v2207.ky10.aarch64Build: Kylin Linux Advanced Server release V10 (SP3) /(La…...
Redis四种模式在Spring Boot框架下的配置
1. 单机模式 application.properties 配置: spring.redis.host127.0.0.1 spring.redis.port6379 spring.redis.passwordyourpasswordspring.redis.host: 该配置指定 Redis 服务器的主机地址。在单机模式下,通常是本地 Redis 实例(127.0.0.1…...
Golang的性能监控指标
Golang的性能监控指标 一、介绍 是一种高性能的编程语言,因其并发模型和内建的性能监控工具而备受开发者青睐。在实际开发中,我们需要了解一些重要的性能监控指标,以便及时发现和解决性能问题。本文将介绍Golang中常用的性能监控指标…...
基于GAN和DenseNett组合的调制信号分类网络(源码)
(需要源码请私信或评论) 生成对抗网络(GAN)原理 生成对抗网络(GAN)是一种革命性的深度学习模型,在无监督学习领域取得了显著进展。其核心思想基于 二人零和博弈 ,通过生成模型和判别模型的相互竞争实现高质量的数据合成。GAN由Ian Goodfellow等人于2014年首次提出,随后在图…...
uniapp 项目基础搭建(vue2)
一 .创建项目 创建项目可以通过工具创建,也可以通过脚手架下载 1.通过工具创建 2.通过脚手架下载 安装脚手架 npm install -g vue/cli 下载项目模板 vue create -p dcloudio/uni-preset-vue 项目名称 二. 下载相关依赖 1. 项目默认是没有package.json文件的&…...
中关村科金外呼机器人智能沟通破解营销难题
当今,传统的营销方式在效率、成本控制、客户管理等方面逐渐显现出局限性,难以满足现代企业的需求。如何提升营销效率、降低运营成本、有效管理客户会员,成为企业的难题。中关村科金外呼机器人通过智能化沟通技术,为企业提供了一站…...
【Linux】处理用户输入
一、基本介绍 1、如何传递参数 向shell脚本传递数据的最基本方法就是通过命令行参数。如下,这条命令会向test.sh脚本传递10和20这两个参数。 ./test.sh 10 20 2、如何读取参数 bash shell会将所有的命令行参数都指派给称作位置参数(positional parame…...
flask后端开发(1):第一个Flask项目
目录 一、Helloworddebug、host、port的配置 gitcode地址: https://gitcode.com/qq_43920838/flask_project.git 一、Helloword 一般是会创建两个文件夹和app.py app.py from flask import FlaskappFlask(__name__)app.route(/) def hello_world():return Hello…...
Highcharts 饼图:数据可视化利器
Highcharts 饼图:数据可视化利器 引言 在数据可视化的领域中,饼图作为一种经典且直观的图表类型,被广泛应用于各种行业和场景中。Highcharts,作为一个功能强大且易于使用的JavaScript图表库,为我们提供了创建交互式和…...
【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道(多模态 OCR → 语义检索 → 答案渲染)、两级检索(倒排 BM25 向量 HNSW)并以大语言模型兜底”的整体框架: 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后,分别用…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程:(白话解释) 我们将原始待发送的消息称为 M M M,依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)(意思就是 G ( x ) G(x) G(x) 是已知的)࿰…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
PL0语法,分析器实现!
简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
智能AI电话机器人系统的识别能力现状与发展水平
一、引言 随着人工智能技术的飞速发展,AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术,在客户服务、营销推广、信息查询等领域发挥着越来越重要…...
排序算法总结(C++)
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指:同样大小的样本 **(同样大小的数据)**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill
视觉语言模型(Vision-Language Models, VLMs),为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展,机器人仍难以胜任复杂的长时程任务(如家具装配),主要受限于人…...
jmeter聚合报告中参数详解
sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample(样本数) 表示测试中发送的请求数量,即测试执行了多少次请求。 单位,以个或者次数表示。 示例:…...
