前端缓存踩坑指南:如何优雅地解决浏览器缓存问题?
浏览器缓存,配置得当,它能让页面飞起来;配置错了,一次小小的上线,就能把你扔进线上 bug 的坑里。你可能遇到过这些情况:
- 部署上线了,结果用户还在加载旧的 JS;
- 接口数据改了,页面却还拿着几分钟前的老版本;
- Service Worker 缓了一大堆东西,结果连新页面都加载不出来……
一、浏览器缓存到底是怎么一回事?
别被“缓存”两个字骗了,它不只是简单地“存一下资源”。
浏览器的缓存机制其实是分层的,而且各层的策略和触发条件都不一样:
1.1 三类缓存存储层
缓存类型 | 生命周期 | 典型用途 |
Memory Cache | 页面打开期间,关闭即清 | JS/CSS 快速复用 |
Disk Cache | 浏览器层面,长期有效 | HTML、图片等 |
Service Worker Cache | 自定义、可离线 | PWA 场景或定制缓存策略 |
1.2 两种核心缓存逻辑
浏览器判断一个资源能不能用缓存,基本分这两种逻辑:
✅ 强缓存(直接用,不发请求)
通过 HTTP 响应头:
Cache-Control: max-age=31536000
或者:
Expires: Wed, 21 Oct 2025 07:28:00 GMT
只要浏览器还在有效期内,连请求都不发,直接从缓存取资源。
✅ 协商缓存(发请求,看是否要更新)
如果没命中强缓存,浏览器会尝试和服务器协商资源是否变了:
If-None-Match: "e1d3f...etag"
如果服务器返回 304,说明资源没变,浏览器用本地缓存;否则重新拉。
二、常见“缓存坑”还原现场
🧨 场景一:JS 改了,用户却还是老页面
怎么踩的?
前端用了默认打包配置,JS 文件名不变,浏览器命中了强缓存,用户根本没加载到新版资源。
怎么救?
- 打包输出文件名加上 hash,比如:
app.3e9fbd.js
Vite/Webpack 都支持 [contenthash]
。
- 确保 HTML 不缓存!因为 HTML 决定了要加载哪个 JS 文件,如果 HTML 没更新,JS 永远也更新不了。
Cache-Control: no-store
- 如果用了 CDN,还要记得清缓存或者上版本号。
🧨 场景二:接口数据老是卡住,怎么刷新都不变?
怎么踩的?
很多时候是 GET 请求被浏览器或者中间代理缓存了。
比如:
GET /api/user/info
但服务端没写清楚 Cache-Control
,浏览器自动缓存了响应。
怎么救?
- 后端返回头加上:
Cache-Control: no-cache, no-store, must-revalidate
- 前端请求的时候,给 URL 加时间戳,强制打破缓存:
fetch(`/api/user/info?_t=${Date.now()}`)
🧨 场景三:Service Worker 缓了个寂寞,更新根本不生效
怎么踩的?
你可能用了 Workbox 或手写了 SW 缓静态资源,但是没处理好版本更新流程,结果用户永远在旧版本里打转。
怎么救?
- 每次构建产出时更新 SW 文件里的版本号:
const CACHE_NAME = 'my-app-v2.0.1';
- 在
install
阶段调用self.skipWaiting()
,跳过等待状态。 - 在
activate
阶段用clients.claim()
接管所有页面。 - 页面上监听 SW 更新事件,给用户提示“有新版本啦,点我刷新”。
三、前端缓存怎么设计才靠谱?
我们总结一个简化但实用的资源缓存模型:
资源类型 | 缓存策略 | 原因 |
|
| 确保每次加载最新入口 |
JS/CSS(打包产物) |
| 文件名唯一,放一年都没问题 |
图片 / 字体 | CDN 强缓存 | 资源大且变化少 |
接口数据 |
/ 加时间戳 | 实时性要求高 |
PWA 离线资源 | SW 控制 | 手动缓存 + 可更新 |
四、工程化落地建议
别只靠脑子记,我们得把缓存策略写进构建流程里:
4.1 打包配置文件指纹
Webpack/Vite:
output: {filename: '[name].[contenthash].js'
}
4.2 HTML 注入正确的资源引用
Webpack 用 HtmlWebpackPlugin
;Vite 自动处理。
4.3 CDN 清缓存脚本
比如:
npx aliyun-cdn-purge path/to/index.html
或者自动脚本 + Git Hook 联动清缓存。
五、Service Worker
建议不要上来就用 SW 缓全站资源,除非你非常清楚它的行为。
常用策略:
- 图片、静态文件:Cache First
- 接口数据:Network First
- HTML 入口:Network Only
- 通知/消息等:Network Only + fallback
搭配 Workbox,配置如下:
workbox.routing.registerRoute(/\.(?:png|jpg|jpeg|svg)$/,new workbox.strategies.CacheFirst({cacheName: 'images',})
);
更新版本时,只需要更新缓存名,比如:
const CACHE_NAME = 'v2.0.3';
页面监听更新:
navigator.serviceWorker.onupdatefound = () => {// 显示刷新提示
}
六、调试缓存的几种方法
- Chrome DevTools → Network 里看资源的
Status
是不是(from disk cache)
或(from memory cache)
- 查看
Response Headers
是否有Cache-Control
、ETag
curl -I
直接看 HTTP 响应头- Service Worker 状态 → Chrome DevTools → Application → Service Worker
总结
浏览器缓存细节极多,尤其是前端更新策略和 CDN/服务器协作时,要明确方向:
- 明确哪些资源该缓存、缓存多久
- 更新机制清晰、可控、不怕上线
- 构建流程自动化,不靠人肉维护
相关文章:
前端缓存踩坑指南:如何优雅地解决浏览器缓存问题?
浏览器缓存,配置得当,它能让页面飞起来;配置错了,一次小小的上线,就能把你扔进线上 bug 的坑里。你可能遇到过这些情况: 部署上线了,结果用户还在加载旧的 JS;接口数据改了…...
XML语言
XML语言 在开始介绍Mybatis之前,先介绍一下XML语言,XML语言发明最初是用于数据的存储和传输,它是由一个一个的标签嵌套而成 <?xml version"1.0" encoding"UTF-8" ?> <outer> <name>阿伟</name&…...
垃圾回收的三色标记算法
目录 1、介绍 1.1、发展 1.2、基本原理 2、执行过程 2.1、初始标记 (Initial Marking) 2.2、并发标记 (Concurrent Marking) 2.3、重新标记 (Remark) 2.4、垃圾清理阶段 3、并发标记 3.1、浮动垃圾 3.2、漏标 前言 三色标记(Tri-color Marking࿰…...
紫禁城多语言海外投资理财返利源码带前端uniapp纯工程文件
测试环境:Linux系统CentOS7.6、宝塔、PHP7.2、MySQL5.6,根目录public,伪静态thinkphp,开启ssl证书 语言:中文简体、英文、越南语、马来语、日语、巴西语、印尼语、泰语 前端是uniapp的源码,我已经把nmp给你…...
深入剖析 I/O 复用之 select 机制
深入剖析 I/O 复用之 select 机制 在网络编程中,I/O 复用是一项关键技术,它允许程序同时监控多个文件描述符的状态变化,从而高效地处理多个 I/O 操作。select 作为 I/O 复用的经典实现方式,在众多网络应用中扮演着重要角色。本文…...
Android开发报错解决
Android开发报错解决 组件相关文件相关权限相关代码相关程序报错IDE相关版本对应框架okhttp请求失败 Roomno such table cocos2d 组件相关 使用gravity属性让文字居中是,需把该属性放在text属性上面ScrollView只能容纳一个子视图 文件相关 放在drawble下的图片资源…...
Linux 网络命名空间:从内核资源管理到容器网络隔离
1. 网络命名空间是什么? 网络命名空间(Network Namespace) 是 Linux 内核提供的一种网络资源隔离机制,用于为进程或容器创建完全独立的网络环境。它并非物理或虚拟的网络接口(如网卡、veth pair 等),而是一个虚拟容器,包含以下资源的独立实例: 网络接口(物理或虚拟)…...
VNC windows连接ubuntu桌面
✅ 步骤 1:安装 VNC 服务器 首先,我们需要在 Winux 系统上安装一个 VNC 服务器。这里我们使用 tigervnc 作为例子,它是一个常用的 VNC 服务器软件。 打开终端并更新你的软件包: sudo apt update安装 tigervnc 服务器:…...
Elastic:如何构建由 AI 驱动的数字客户体验策略
作者:来自 Elastic Elastic Platform Team 客户通过多个数字渠道与企业和组织互动 —— 从网站和应用程序到聊天机器人和电子邮件。这些接触点构成了数字客户体验(DCX)。无缝的数字客户体验能显著提升客户满意度,进而带动更高的收…...
安防多协议接入/视频汇聚平台EasyCVR助力工地/工程/建筑施工领域搭建视频远程监控系统
一、摄像机安装方案 1)安装位置选择:摄像机安装需避开强振源与电磁干扰区,兼顾建筑外观,隐蔽安装。其防护罩应巧妙遮蔽视角,增强安防威慑。电梯轿厢内的摄像机,建议藏于吊顶。连接摄像机的视频、电源及…...
《100天精通Python——基础篇 2025 第16天:异常处理与调试机制详解》
目录 一、认识异常1.1 为什么要使用异常处理机制?1.2 语法错误1.3 异常错误1.4 如何解读错误信息 二、异常处理2.1 异常的捕获2.2 Python内置异常2.3 捕获多个异常2.4 raise语句与as子句2.5 使用traceback查看异常2.6 try…except…else语句2.7 try…except…finally语句--捕获…...
Ceph PG unfound/lost 问题排查与解决
Ceph PG unfound/lost 问题排查与解决 背景现象排查过程经验总结参考命令结语 背景 Ceph 集群出现 HEALTH_ERR,提示有 PG 对象丢失(unfound),并且 repair 无法自动修复。 现象 ceph health detail 显示: HEALTH_ERR …...
LeetCode热题100--54.螺旋矩阵--中等
1. 题目 给你一个 m 行 n 列的矩阵 matrix ,请按照 顺时针螺旋顺序 ,返回矩阵中的所有元素。 示例 1: 输入:matrix [[1,2,3],[4,5,6],[7,8,9]] 输出:[1,2,3,6,9,8,7,4,5] 示例 2: 输入:ma…...
【嵌入式开发-CAN】
嵌入式开发-CAN ■ CAN简介 ■ CAN简介...
SQLite3介绍与常用语句汇总
SQLite3简介 SQLite3是一款轻量级的、基于文件的开源关系型数据库引擎,由 D. Richard Hipp 于 2000 年首次发布。它遵循 SQL 标准,但与传统的数据库系统不同,SQLite 并不运行在独立的服务器进程中,而是作为一个嵌入式数据库引擎直…...
uniapp中score-view中的文字无法换行问题。
项目场景: 今天遇到一个很恶心的问题,uniapp中的文字突然无法换行了。得..就介样 原因分析: 提示:经过一fan研究后发现 scroll-view为了能够横向滚动设置了white-space: nowrap; 强制不换行 解决起来最先想到的是,父…...
[学习]RTKLib详解:ephemeris.c与rinex.c
文章目录 RTKLib详解:ephemeris.c与rinex.cPART A: ephemeris.c一、代码整体作用与工作流程分析1.1 整体作用1.2 工作流程 二、核心函数说明2.1 alm2pos (Almanac to Position)2.2 eph2clk (Ephemeris to Clock)2.3 eph2pos (Ephemeris to Position)2.4 geph2pos (G…...
JDBC:java与数据库连接,Maven,MyBatis
JDBC 是使用Java语言操作关系型数据库的一套API JDBC是接口,用其实现一系列不同种类关系型数据库的实现类 JDBC本质: 官方(sun公司)定义的一套操作所有关系型数据库的规则,即接口 各个数据库厂商去实现这套接口,提供数据库驱动jar包 我…...
代码随想录第39天:单调栈
一、每日温度(Leetcode 739) 思路: 栈里存放的是**“还没等到升温的日子”**的索引; 每遇到一个新的温度: 检查是否比栈顶的温度高; 如果高了,说明升温来了,栈顶元素可以出栈&…...
如何在vite构建的vue项目中从0到1配置postcss-pxtorem
1. 安装postcss-pxtorem和autoprefixer yarn add postcss-pxtorem autoprefixer2. 在vite.config.ts中写入 import { defineConfig } from "vite"; import vue from "vitejs/plugin-vue"; import postcssPxtorem from "postcss-pxtorem"; impo…...
基于51单片机的自动洗衣机衣料材质proteus仿真
地址:https://pan.baidu.com/s/13d2bJ6vKh8ZLuDBZnI0VGw 提取码:1234 仿真图: 芯片/模块的特点: AT89C52/AT89C51简介: AT89C51 是一款常用的 8 位单片机,由 Atmel 公司(现已被 Microchip 收…...
永久免费的小工具,内嵌微软接口
有时候我们制作短视频,需要为视频添加声音,但部分配音软件要收费。不过别担心,今天给大家推荐一款超实用的免费文字转语音软件,完全无需担忧费用问题! 01 软件介绍 这款软件就是Read Aloud,具有以下特点&a…...
C++漫步结构与平衡的殿堂:AVL树
文章目录 1.AVL树的概念2.AVL树的结构3.AVL树的插入4.AVL树的旋转4.1 左单旋4.2 右单旋4.3 右左双旋4.4 左右双旋 5.AVL树的删除6.AVL树的高度7.AVL树的平衡判断希望读者们多多三连支持小编会继续更新你们的鼓励就是我前进的动力! 二叉搜索树有其自身的缺陷…...
MIST:一键解锁 macOS 历史版本,旧系统安装不再难!
在 Mac 电脑的使用过程中,你是否遇到过这些困扰?为了运行一款经典设计软件,新系统却无法兼容;或是想给老旧 Mac 设备升级,却找不到适配的系统版本。而 App Store 里,旧版 macOS 安装包就像 “隐藏副本”&am…...
mac连接lniux服务器教学笔记
从你的检查结果看,容器内已经安装了 XFCE 桌面环境(xfce.desktop 和 xubuntu.desktop 的存在说明桌面环境已存在)。以下是针对 Docker 容器环境的远程桌面配置方案: 一、容器内快速配置远程桌面(XFCE VNC)…...
网站公安备案流程及审核时间
在中国,网站运营除了需要 ICP备案(工信部备案),还需完成 公安备案(公安机关互联网站安全备案)。以下是详细流程及审核时间说明: 一、公安备案流程 1. 备案对象 所有在中国境内运营的网站&#…...
python学生作业提交管理系统-在线作业提交系统
目录 技术栈介绍具体实现截图系统设计研究方法:设计步骤设计流程核心代码部分展示研究方法详细视频演示试验方案论文大纲源码获取/详细视频演示 技术栈介绍 Django-SpringBoot-php-Node.js-flask 本课题的研究方法和研究步骤基本合理,难度适中…...
从颜料混色到网络安全:DH算法的跨界智慧
一、颜料混色的秘密 想象一下,你和朋友各自有一罐私密的颜料,但你们想共同调出一种只有彼此知道的新颜色,而旁观者即使看到你们的操作也无法复现。奇怪的是,你们全程没有直接交换颜料,却能达成共识——这就是**迪菲-赫…...
初学者的AI智能体课程:构建AI智能体的十堂课
初学者的AI智能体课程:构建AI智能体的十堂课 在人工智能(AI)领域,AI智能体正在逐渐发挥其不容忽视的作用。自动化的智能体不仅仅在理论上广泛讨论,更加在实际应用中开辟了一片新的天地。那么如何动手开发属于自己的AI智能体呢?Microsoft提供的AI智能体入门课正是为此而设…...
数据结构 - 8( AVL 树和红黑树 10000 字详解 )
一:二叉搜索树 1.1 回顾二叉搜索树 我们在树的章节中学习了二叉搜索树的概念。二叉搜索树满足以下性质:如果它的左子树存在,则左子树所有节点的值均小于根节点的值;如果右子树存在,则右子树所有节点的值均大于根节点…...
Tcp 通信简单demo思路
Server 端 -------------------------- 初始化部分 ------------------------------- 1.创建监听套接字: 使用socket(协议家族,套接字的类型,0) 套接字类型有 SOCK_STREAM:表示面向连接的套接字(Tcp协议)&…...
Cesium 导航控件(指南针 + 缩放按钮),自定义放置位置
Cesium 导航控件(指南针 缩放按钮) Cesium 导航控件(指南针 缩放按钮)的功能实现,从技术角度来看,可以整理出一整套实现流程和技术结构。这套流程结合了以下几个核心技术点: 1、整体功能目标 …...
MySQL的索引和事务
目录 1、索引 1.1 查看索引 1.2 创建索引 1.3 删除索引 1.4 索引的实现 2、事务 1、索引 索引等同于目录,属于针对查询操作的一个优化手段,可以通过索引来加快查询的速度,避免针对表进行遍历。 主键、unique和外键都是会自动生成索引的…...
【Fifty Project - D25】
今日完成记录 TimePlan完成情况9:00 - 11:30大论文修改修改情况书小论文修改√16:00 - 17 :00Leetcode√ Leetcode 每日一题 到达最后一个房间的最小时间II:和昨天的每日一题大致一样,增加一个条件&…...
pip下载tmp不够
问题描述 今天遇到一个小问题,在用pip安装的时候提示 ERROR: Could not install packages due to an OSError: [Errno 28] No space left on device 但我们单位用于生产环境的机器磁盘都是基本是论TB的,怎么会不够呢? 原因分析:…...
一种机载扫描雷达实时超分辨成像方法——论文阅读
一种机载扫描雷达实时超分辨成像方法 1. 专利的研究目标与产业意义1.1 研究目标与实际问题1.2 产业意义2. 专利的创新方法:滑窗递归优化与实时更新2.1 核心模型与公式2.2 与传统方法对比优势3. 实验设计与验证3.1 仿真参数3.2 实验结果4. 未来研究方向与挑战4.1 学术挑战4.2 技…...
nginx 会话保持(cookie的配置)
nginx会话保持主要有以下几种实现方式。 1. ip_hash ip_hash使用源地址哈希算法,将同一客户端的请求总是发往同一个后端服务器,除非该服务器不可用。 ip_hash语法: upstream backend { ip_hash; server backend1.example.com; server backend2.example.com; …...
nginx 实现动静分离
环境 : 三个机器,准备一个nginx代理 两个http 分别处理动态和静态 知识点--expires expires功能说明---(为客户端配置缓存时间) nginx缓存的设置可以提高网站性能,对于网站的图片,尤其是新闻网站,图片一旦发布,改动的可能是非常小的,为了减小对服务器请求的压力,提高…...
k8s的pod挂载共享内存
k8s的pod挂载共享内存,限制不生效问题: 注:/dev/shm 是 Linux 系统中用于共享内存的特殊路径。通过将 emptyDir 的 medium 设置为 Memory,可以确保 /dev/shm 正确地挂载到一个基于内存的文件系统,从而实现高效的共享内…...
Java高频面试之并发编程-14
hello啊,各位观众姥爷们!!!本baby今天又来报道了!哈哈哈哈哈嗝🐶 面试官:指令重排有限制没有?happens-before 又是什么? 在并发编程中,指令重排(…...
Linux基础(最常用基本命令)
1.查看文件ls 1.1 格式 ls 选项 参数,如:ls -lah ~/ 1.2 选项设置: -l:list 以列表方式显示文件 -h:human-readable 以人类可读的方式显示文件大小(会将纯数字转换为kb,mb) -a:all 显示所有的…...
【Python 日期和时间】
Python 中处理日期和时间主要依赖 datetime 模块,结合 dateutil 和 pytz 等第三方库可实现更复杂的需求。以下是日期和时间处理的核心知识点: 一、基础模块 1. datetime 模块 核心类:datetime, date, time, timedelta安装依赖:p…...
C#简易Modbus从站仿真器
C#使用NModbus库,编写从站仿真器,支持Modbus TCP访问,支持多个从站地址和动态启用/停用从站(模拟离线),支持数据变化,可以很方便实现,最终效果如图所示。 项目采用.net framework 4.…...
FPGA图像处理(四)------ 图像裁剪
timescale 1ns / 1ps // // Description: 图像裁剪算法 // module image_crop(input wire clk,input wire reset,input wire [10:0] img_width,input wire [10:0] img_height,input wire [10:0] img_x_start,input wire [10:0] img_x_end,input wire [10:0] img_y_start,input…...
1.MySQL数据库初体验
1.1数据库简介 1.1.1使用数据库的必要性 使用数据库可以高效且条理分明地存储数据,使人们能够更加迅速、方便地管理数据。 数据库特点: a.可以结构化存储大量地数据信息,方便用户进行有效的检索 b.可以有效地保持数据信息的一致性、完整…...
量子密码的轻量级通信协议笔记
代码笔记 本文档提供了项目代码的详细说明,包括代码结构、关键算法实现和重要的代码片段。 代码结构 . ├── Makefile # 构建系统配置 ├── coap_client.c # CoAP客户端实现 ├── coap_server.c # CoAP服务端实现 ├─…...
探索 C++ 在行业应用与技术融合中的核心价值
引言 在科技飞速发展的今天,C 作为一门兼具高性能与灵活性的编程语言,正深度融入游戏开发、人工智能、区块链等多个关键领域。其高效的内存管理、底层控制能力以及对现代硬件架构的深度优化,使其成为复杂系统开发的首选语言。本文将深入探讨…...
雷赛伺服电机
ACM0经济 编码器17位: ACM1基本 编码器23位磁编, ACM2通用 编码器24位光电, 插头定义:...
word文档基本操作: 编辑页眉页脚和插入目录
文章目录 引言I 编辑页眉页脚II 插入目录III 知识扩展基于axure画架构图基于Knife4j导出接口文档基于PDManer导出数据库设计文档引言 背景: 信息安全认证需要准备相关文件用于审核 一般的开发设计包含总体设计、概要设计、详细设计、接口设计、数据库设计、部署结构设计、原型…...
数据结构(二)——线性表的链式表示和实现
一、单链表 1.单链表的定义 如图所示每个节点包含两个域:数据域和指针域。数据域存储数据元素,指针域存储下一个节点的地址,因此指针指向的类型也是节点类型。每个指针都指向下一个节点,都是朝一个方向的,这样的链表称为单向链表…...