一个Bug搞懂浏览器缓存策略

最近项目遇到一个问题,发版之后,用户需要清除缓存才可以访问到最新的应用,但是我们访问却可以正常。经过1天的研究搞懂了浏览器缓存的机制,记录下分析轨迹。

浏览器缓存基础知识

浏览器强缓存和协议缓存都是用来提高网页加载速度和减少网络传输的技朧。

强缓存

浏览器强缓存是通过设置HTTP响应头中的Cache-Control和Expires字段来指定浏览器在一定时间内直接从本地缓存中获取资源,而不会向服务器发送请求。这样可以减少网络传输时间,加快页面加载速度。常用的设置有max-age和s-maxage,分别表示资源的缓存时间。

在这里插入图片描述

命中强缓存条件

  1. Cache-Control: max-age=xxx
  2. 响应头有 Expires
  3. 响应头存在ETagLast-Modified(协商缓存)且 不存在Cache-Control:no-cache

强缓存非常有必要设置过期时间,如果没有设置过期时间,新系统升级之后浏览器内有强缓存,默认是走强缓存的。

协议缓存

协议缓存是通过使用ETag和Last-Modified字段来实现的。服务器在返回资源时会生成一个唯一的ETag标识和最后修改时间,浏览器在下次请求资源时会将这些信息发送给服务器,服务器根据这些信息判断资源是否发生变化,如果没有变化则返回304 Not Modified状态码,告诉浏览器直接从缓存中获取资源。这样可以减少网络传输和服务器负载。

协议缓存过程:

  1. 第一次请求服务器,服务器返回200状态码、Last-Modified时间戳、ETag签名和完整资源
  2. 浏览器保存资源内容,以及Last-Modified和ETag值
  3. 再次请求浏览器带上If-Modified-Since(值为上次服务器返回的Last-Modified)和If-None-Match(上次服务器返回的ETag)请求头
  4. 服务器收到请求后,对比当前资源文件的最后修改时间 是否等于 If-Modified-Since 以及资源文件的ETag 是否等于 If-None-Match (ETag优先级高于Last-Modified)
  5. 如果相同则返回304,客户端使用缓存
  6. 如果不相同则服务器返回资源,且返回新的ETag 和 Last-Modified,并更新到缓存

在这里插入图片描述

浏览器缓存流程

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

对于同一个url资源,不管服务器有没有更新资源,只要浏览器缓存时效未过期,都不会主动向服务器重新请求的

问题

系统升级之后,一部分用户反馈访问的还是旧系统,清除缓存之后才能访问新系统。

清除缓存这个问题对于开发来说是一个常规操作,甚至用户也成了默认行为,一直也没有彻底研究过,领导要求解决,趁这个机会研究下浏览器缓存机制。

f12 对界面进行了跟踪,定位到用户行为:

  1. 输入网址
  2. 回车
  3. 网站index.html 没有到服务器,直接 form disk cache

在这里插入图片描述

分析问题

现在访问直接走了磁盘缓存,没有走服务器。下面看下目前的请求和返回头。

在这里插入图片描述
因为Cache-Control: max-age=0 所以触发了强缓存的命中条件,同时如果本地没有强缓存的时候,触发协议缓存。

表现如下:

  1. 用户如果有强缓存则不访问服务器 (旧的系统)
  2. 如果之前没有访问的,没有强缓存或者失效的。第一次访问服务器返回200和资源并记录ETag 和 Last-Modified,第二次会304 走协商缓存。

如何修改

系统更新,用户的强缓存没有过期,直接走了强缓存,导致没有访问服务器最新资源。

三种方式修改:

  1. 使用强缓存,给强缓存设置短暂的过期时间比如1分钟
  2. 不使用强缓存,使用协商缓存
  3. 不使用缓存

建议直接在服务器更改比如nginx 、tomcat 。 客户端优先级低会被服务器覆盖掉。

强缓存设置过期时间

设置强过期的缓存时间为60秒,第一次请求服务器,如果60s之内请求走强缓存不访问服务器,过了时间之后走协商缓存。

设置max-age=60s

nginx 配置:
在这里插入图片描述

在这里插入图片描述

不使用强缓存,使用协议缓存

设置Cache-Control no-cache 不使用强制缓存

nginx 配置:
在这里插入图片描述

在这里插入图片描述

不缓存,每次都刷新

nginx 配置:
在这里插入图片描述
在这里插入图片描述

总结

缓存策略浏览器设置还是比较合理的,主要是强缓存带来的速度是非常快的,这样就存在风险。遇到问题还是需要仔细的分析,而不是知道了固有手段当成了正常流程。

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

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

相关文章

Linux:Makefile的相关知识

背景: 一个工程中的源文件不计数,其按类型、功能、模块分别放在若干个目录中,makefile定义了一系列的 规则来指定,哪些文件需要先编译,哪些文件需要后编译,哪些文件需要重新编译,甚至于进行更复…

算法训练营day38(补),动态规划6

package main func max(a, b int) int { if a > b { return a } return b } 背包最大重量为4。 物品为: 重量价值物品0115物品1320物品2430 每件商品都有无限个! 问背包能背的物品最大价值是多少? func package03(weight, value []…

【leetcode】破解闯关密码 模板字符串

/*** param {number[]} password* return {string}*/ var crackPassword function(password) {return minNumspassword.sort((a,b)>{if(${a}${b}-${b}${a}>0){return 1;}else{return -1;}}).join(""); };巧用模板字符串对数组进行排序

Restful风格解释

示例对比 传统风格开发 Restful风格开发 结论: 传统风格开发中,前端不同操作使用不同的url来访问后端,使得访问变得麻烦restful风格中,前端使用相同的url来访问后端,但是用数据传送方式进行区分(get为请求…

STM32标准库——(13)USART串口数据包

1.HEX数据包 2.文本数据包 3.HEX数据包接收 对于固定包长的HEX数据包,我们可以定义三个状态:等待包头、接收数据、等待包尾,每个状态。都可以用一个变量来标志,例如变量S来表示。这三个状志可以依次定义为S0、S1、S2。类似于置标志位&#xf…

Android Studio level过滤查看各个等级的日志

Android Studio level过滤查看各个等级的日志 旧版as可以在下方的日志输出框选择debug、info,warn、error日志,新版的需要通过在过滤框手动/联想输入 level:xxx,过滤相应等级的日志,如图: android studio/idea返回/前进…

javaee教程郑阿奇课后答案,三年经验月薪50k我是怎么做到的

个人背景 如标题所示,我的个人背景非常简单,Java开发经验1年半,学历普通,2本本科毕业,毕业后出来就一直在Crud,在公司每天重复的工作对我的技术提升并没有什么帮助,但小镇出来的我也深知自我努…

网络工程师笔记3

IP地址类型 A类 255.0.0.0B类 255.255.0.0C类 255.255.255.0D类 E类 子网掩码:从左到右连续的确定网络位 2-4-8-16-32-64-128-256 128 : 1000 0000 64 : 0100 0000 32 : 0010 0000 16 : 0001 0000 8 &am…

LeetCode 560 和为 K 的子数组

LeetCode 560 和为 K 的子数组 问题描述 给定一个整数数组 nums 和一个整数 k,统计并返回该数组中和为 k 的子数组的个数。 子数组是数组中元素的连续非空序列。 解决方法 我们可以使用哈希表来解决这个问题。具体步骤如下: 创建一个哈希表 map&am…

Java包装类缓存机制

1. 什么是 Java 包装类缓存机制? Java 中的包装类(Wrapper Class)是为了将基本数据类型转换为对象而存在的。在 Java 中,每个基本数据类型都有对应的包装类,如 Integer、Double 等。 Java 包装类缓存机制指的是,在某…

c++Boyer-Moore算法的介绍与代码实现(c++)

Boyer-Moore算法是一种用于字符串匹配的高效算法,主要用于在一个文本串中查找一个模式串的出现位置。它的主要思想是利用模式串中的字符分布信息来尽量减少比较的次数,从而提高匹配的效率。 Boyer-Moore算法的关键思想包括两个部分:坏字符规…

Linux和Windows集群中部署HTCondor

目录 1、集群架构 2、HTCondor版本 3、Linux系统安装 3.1、HTCondor安装 3.2、中央管理节点配置 3.3、其他节点配置 4、Windwos系统安装 5、安全配置 6、参考 1、集群架构 操作系统IP地址1*Ubuntu22.04192.168.1.742Ubuntu22.04192.168.1.603Ubuntu22.04192.168.1.6…

[FastDDS] 基于eProsima FastDDS的移动机器人数据中间件——介绍与准备工作

[FastDDS] 基于eProsima FastDDS的移动机器人数据中间件——介绍与准备工作 注明:无 本栏目主要讲述,基于eProsima FastDDS的移动机器人数据中间件的实现、使用、性能测试。 What is [ FastDDS ]: eProsima Fast DDS是DDS(数据分发服务&…

Squid代理服务器配置

需求是:通过外网机(跳板机)访问内网机,并为内网机提供访问网络的能力。 【跳板机T】【内网机N】 公网IP:39.107.xx.xxx 跳板机IP:172.17.216.234 内网机IP:172.17.216.241 Squid代理服务器地址…

探讨分布式数据库ID生成解决方案

在技术面试中,面试官通常通过挑战应聘者的分布式系统知识来评估其能力。今天,让我们模拟一场面试现场,深入了解关于分布式数据库ID生成的解决方案。 面试官:嘿,小伙子,分布式数据库ID生成解决方案了解吗&a…

Linux磁盘设备LVM介绍和常用场景说明

Linux常见的物理设备数据备份和负载均衡模式 1. LVM技术说明2. 相关概念3. 常用命令3.1 安装lvm命令3.2 创建分区3.3 格式化成LVM3.4 其他格式化 4. 常用场景4.1 创建LVM并挂载4.2 LVM扩容4.2.1 xfs扩容4.2.2 ext4扩容 4.2 缩减逻辑卷lv4.3 缩减vg:(迁移…

设计模式(二)单例模式

单例模式:确保一个类只有一个实例,并提供了全局访问点;主要是用于控制共享资源的访问; 单例模式的实现分为懒汉式和饿汉式。 懒汉式单例在需要时才会创建,而饿汉式单例则在类加载时立即创建实例; 单例模…

印象笔记 - Markdown 入门指南

一、Markdown 是什么? Markdown 是一种轻量级的「标记语言」,创始人为约翰格鲁伯,用简洁的语法代替排版,目前被越来越多的知识工作者、写作爱好者、程序员或研究员广泛使用。其常用的标记符号不超过十个,相对于更为复…

一文速览深度伪造检测(Detection of Deepfakes):未来技术的守门人

一文速览深度伪造检测(Detection of Deepfakes):未来技术的守门人 前言一、Deepfakes技术原理卷积神经网络(CNN):细致的艺术学徒生成对抗网络(GAN):画家与评审的双重角色…

MySQL 逗号分隔查询--find_in_set()函数

业务场景: 在使用MySQL的时候,可能的某个字段存储的是一个英文逗号分割的字符串(这里我们不讨论表设计的合理性),如图所示: 我们在查询的时候需要匹配逗号分割中的某个字符串,该怎么查询呢&am…