前端缓存问题（浏览器缓存和http缓存）- 解决办法

最新推荐文章于 2024-09-09 11:26:02 发布
最新推荐文章于 2024-09-09 11:26:02 发布
阅读量485 收藏
点赞数 3
文章标签： 前端 缓存 java idea
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_78673859/article/details/140736790
版权

问题描述：前端代码更新，但因浏览器缓存问题，导致页面源代码并未更新

查看页面源代码的方法：鼠标右键，点击查看页面源代码

如图：
在这里插入图片描述
解决方法：
注：每执行一步，就检查一下浏览器源代码是否已更新，已更新就不用继续操作，否则就一步一步操作，不出意外，肯定没问题！
（如果是用VScode写前端代码，注意保存代码，一定要确定前端代码一定是已经更新在项目中的，例如：可以在idea 中查看前端代码）

1.按 Ctrl+F5 ：强制刷新页面
2.按 Ctrl+Shift+Delete：删除页面缓存
3.在idea中点击Maven，点击项目名下的Lifecycle，双击clean，清除缓存，再重启项目
如图：
在这里插入图片描述
4.在idea中直接删除 target 文件夹，再重启项目
如图：
在这里插入图片描述

小舒不服输
关注
【webpack快速入门】如何解决打包部署之后，应用却没及时更新的缓存问题？
郊眠寺
10-17 2111
一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
纯前端解决--发版后导致浏览器页面缓存出现问题
m0_46875453的博客
01-17 919
试了很多种方法，如在.html页面的meta中添加cache-control；nginx中配置缓存策略；在文件打包中加上时间戳；都没有很好的作用，最终选择前端本地版本号。
前端vue项目的打包更新并提醒用户刷新页面
weixin_45725785的博客
03-01 786
前端每次改动重新部署项目的时候，如果用户一直停留在页面上并未刷新使用，可能会存在数据问题或者一些其他bug，因此，当前端项目更新后，需要提醒用户去重新刷新页面后使用。
前端发版(发包)缓存，需要强制刷新问题处理
天生欧皇张狗蛋
08-05 564
问题原因： 浏览器问题。
vue项目打包部署，自动清理缓存
qq_50386946的博客
05-23 3867
1、在 package.json 文件中有个 version 版本号的属性，在每次打包部署前修改当前的版本号。2、在 main.js 中修改版本号，将版本号存在浏览器缓存中，如果版本号不一致，就重新加载。3、给文件名后面添加 hash 值，确保文件名都是最新的，从而清除缓存。4、在 vue.config.js 文件中修改。
前端开发缓存问题的解决方案
qq_38472451的博客
06-22 148
前端开发缓存问题的解决方案
前端常见问题以及处理方式 - - - （一）浏览器缓存以及解决方法
热门推荐
业余丰富各种技术栈
07-28 2万+
前端常见问题以及处理方式 - - - （一）浏览器缓存以及解决方法
前端项目上线后，浏览器缓存未刷新问题
weixin_42936434的博客
03-07 6176
http的缓存机制是一种优化策略。但也会出现文件变动后浏览器没有更新的问题。综上，入口文件不缓存或采用协商缓存，其他静态资源使用强缓存，url拼接hash值或者打包时给文件名加上hash值。
完美解决 - 前端发版后浏览器缓存问题（发版后及时拉取最新版本代码）
卡尔特斯
10-18 2万+
完美解决 - 前端发版后浏览器缓存问题（发版后及时拉取最新版本代码）
前端开发中的缓存问题
qq_41867900的博客
10-18 926
比如说前端更新了代码，单独的h5页面还好，如果说是vue或者react项目打包出来新的js css文件，更新上线之后，有的用户可能存在缓存，还是之前的页面，就会存在白屏找不到之前页面的情况，说动清除缓存之后就可以。有时候浏览器或者手机app会将网页或者app中的数据进行缓存，可以很大程度上做到优化，比如说网络比较卡的时候，如果有缓存的数据，就可以优化用户的体验。但是缓存也会带来一些问题。
WEB前端开发js，css文件浏览器缓存问题处理
小学程序员的博客
11-23 381
请求路径文件加版本号（简单粗暴有效） <script src="../js/common.js?v=1"></script> <script src="../js/mui.min.js?v=1"></script> <script src="../js/public.js?v=1"></script> 每次修改js，css文件后 一同修改版本号，前端就会请求新版本号的文件了 ...
2024年Web前端最全Vue进阶（幺捌柒）浏览器缓存问题解决_vue 浏览器缓存，阿里、百度、美团、携程、蚂蚁面经分享
2401_84123201的博客
05-11 2160
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】vue 项目打包部署上线之后，每一次都会有浏览器缓存问题，导致系统用户访问上个迭代批次的旧资源（
前端存储数据时浏览器缓存不够用的解决办法
高彩琼的博客
06-09 1233
通常我们使用的浏览器缓存是这三种 cookie、localStorage、sessionStorage 最大的存储量只有5M。当项目缓存的东西比如：要素过多时根本不够用，所以考虑使用浏览器数据库 indexDB，大小由你的电脑存储盘决定。百度了一下感觉还挺复杂，其实很简单，存和取，完事。 废话不多说献上效果图： 1、使用必备的 一段代码奉上，封装一下indexDB,是为了更好的调用取，存，这段代码可以不用懂要学会用就可以了。取： INDEXDB.getItem('id', (res) => { consol
前端开发中不想让浏览器缓存数据怎么办？
qq_34640990的博客
07-02 444
为了防止浏览器缓存，最直接和有效的方法是通过设置适当的HTTP头部来控制缓存行为。其他方法，如使用查询字符串或构建工具，可以作为辅助手段，但不应替代HTTP头部的使用。虽然HTML 标签不能直接控制HTTP缓存，但你可以使用它们来指定页面应该多久刷新一次，从而间接影响缓存行为。虽然这不是一个严格的缓存控制方法，但它可以欺骗浏览器认为这是一个新的请求，从而避免使用缓存。如果你使用Webpack、Gulp等构建工具，它们通常提供了插件或加载器来自动处理缓存问题，比如通过添加哈希值到文件名来避免缓存问题。
前端性能优化(三)——浏览器九大缓存方法，如何快速学习前端开发
2401_84093860的博客
04-05 1629
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取。
前端发版后浏览器缓存问题
qq_43340606的博客
11-02 2797
开发完发布新版本后，在有些电脑上总需要强刷才能获取到最新版本的内容，太恶心了。浏览器缓存是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。附：前端缓存详解，看了这篇更容易理解缓存配置的概念，浏览器缓存主要有两类：协商缓存 和 彻底(强)缓存。
前端发版缓存问题
paopao_pop的博客
04-26 1165
前端发版缓存问题
前端性能优化(三)——浏览器九大缓存方法
2401_84094725的博客
04-15 970
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里领取题：常用算法》PDF完整版点击这里领取**[外链图片转存中…(img-5WiWWGF6-1713160366656)][外链图片转存中…(img-gWW3SeoM-1713160366657)]
前端缓存页面处理方法
最新发布
我不写文章，我只是文章的搬运工
09-09 1042
通常我们希望在应用发布后，浏览器能够加载最新的资源文件，而不是从缓存中读取过时的内容。可以为 HTML 文件设置较短的缓存时间，而为带有文件指纹的静态资源（如 CSS、JS）设置较长的缓存时间。每次发布新版本时，生成的资源文件名中的哈希值会改变，这样就避免了加载旧的缓存文件。• 文件指纹 是最简单且广泛使用的解决方案，与服务器的 Cache-Control 设置结合，可以很好地控制缓存问题。• CSS/JS 文件（带有指纹）：可以设置较长的缓存时间，因为文件名会变更，确保用户不会下载旧版本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值