【无标题】web端原生html项目在版本更新后不同缓存及时更新的方法

最新推荐文章于 2024-03-07 13:33:37 发布
VIP文章 最新推荐文章于 2024-03-07 13:33:37 发布
阅读量708 收藏
点赞数
分类专栏： js 文章标签： 前端 html 缓存
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54362826/article/details/123033626
版权
1. 前情

项目代码更新部署后，浏览器仍然使用缓存，初始所见即为未修改时的代码，需要强制清除缓存后才能正常显示。

2. 解决方法

在页面引入的css和js文件后加上?v=1234等字样，即为文件的版本号。
当版本号改变时，浏览器将不会使用缓存，而是直接更新至最新的代码。

  • 动态添加版本号：
<script type="text/javascript">
document.write('<script type="text/javascript" charset="UTF-8" src="__STATIC__/webuploader/upload.js?v='+Math.random
最低0.47元/天 解锁文章
weixin_54362826
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Node.js原生api搭建web服务器的方法步骤
01-21
node.js 实现一个简单的 web 服务器还是比较简单的，以前利用 express 框架实现过『nodeJS搭一个简单的(代理)web服务器』。代码量很少，可是使用时需要安装依赖，多处使用难免有点不方便。于是便有了完全使用原生 ...
浏览器/web-缓存知识点梳理
龙叔运维的博客
10-15 408
引言 Web 缓存 位于 内容 源 Web 服务器 和 客户 端 之间， 当 用户 访问 一个 URL 时， Web 缓存 服务器 会 去 后端 Web 源 服务器 取回 要 输出 的 内容， 然后， 当下 一个 请求 到来 时， 如果 访问 的 是 相同 的 URL， Web 缓存 服务器 直接 输出 内容 给 客户 端， 而 不是 向 源 服务器 再次 发送 请求。 Web 缓存 降低 了 内容 源 Web 服务器、 数据库 的 负载， 减少 了 网络 延迟， 提高 了 用户 访问 的 响应 速度，
Web开发：使用缓存
ml202187的博客
07-22 1399
结合自身经验和内部资料总结的Python教程，每天3-5章，最短1个月就能全方位的完成Python的学习并进行实战开发，学完了定能成为大佬！加油吧！卷起来！《Python全栈教程（0基础）》
关于设置html不让浏览器进行缓存的问题
qwguo
03-07 1130
我们现在在做vue，react等项目的时候，由于是单页面的纯前端项目，他们的入口文件往往都是静态的html单一文件。这里需要注意的是，取消缓存可能会增加服务器的负载，因为每次请求都需要从服务器重新获取内容。因此，在决定取消缓存时，请确保权衡利弊，并考虑使用适当的缓存策略来优化性能和用户体验。
解决web项目发布新版本需要清除浏览器缓存的问题
热门推荐
chen_bo526的博客
01-10 2万+
一、bug起因 最近做公司的项目，对样式进行了修改后，新版本上线。测试那边经常说：修改的样式没有生效，我都是让他们清下浏览器缓存试试。可是到了正式环境，用户（也就是老总们）并不都一定知道清缓存这件事，导致一出问题就找我们，所以上面下死命令，要把这个问题解决掉。 二、解决方案 其实浏览器缓存是有好处的，第一次访问网站会从服务器获取静态的资源，然后将静态资源在游览器中缓存，下次用户在访问时，就直接获取...
WEB项目部署发版-通知用户在线更新方案
高灯GFE
02-27 728
由于是单页面应用，用户一进入网站，就会把HTML与相对应的资源利用浏览器的缓存机制，停留在本地，这样的好处，就是再次进入网站，可以利用缓存机制，可快速进入网站。这也就造成了我们项目版本迭代后，用户因缓存机制，会继续使用旧迭代版本，需要用户手动刷新去服务器请求获取新的HTML，来使用新迭代版本。用户手动刷新获取新版本html（需要在nginx 配置，在nginx.conf文件做设置，让 index.html 不缓存）需求项目迭代后，用户使用会有版本更新的提示或者自动刷新，实现版本升级用户有感知方案。
前端部署发布项目后，如何通知用户刷新页面、清除缓存
qq_35430000的博客
04-19 8756
前端部署发布项目后，如何通知用户刷新页面、清除缓存
前端项目上线后，浏览器缓存未刷新问题
weixin_42936434的博客
03-07 4938
http的缓存机制是一种优化策略。但也会出现文件变动后浏览器没有更新的问题。综上，入口文件不缓存或采用协商缓存，其他静态资源使用强缓存，url拼接hash值或者打包时给文件名加上hash值。
如何实现 web 程序自动更新
xuefan8596的专栏
03-19 1126
检测官方web新版本程序的发布，根据用户意愿可以下载并更新本地web程序。 希望通过web页面来实现，并能让用户看到每一步的更新过程。其中可能有重启（resin，tomcat等）服务器的过程。...
更新修改后的Python模块方法
01-20
1.利用python的MySQLdb模块利用原生的sql语句进行更新的方法代码 配置方法代码 2.使用execute方法执行SQL语句方法代码 方法二： 1.利用python的框架flask和sqlalchemy进行更新的方法代码： 配置数据库的方法代码 ...
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
12-29
为此去官网上查了下资料，发现在vue2.0版本中，{{{}}}转换HTML的方式已经被废除，该版本中必须使用v-html标签进行转换，下面是具体的使用方法： <span v-html=htmlData> {{htmlData}} 总结 以上所述是小编给大家...
django框架使用orm实现批量更新数据的方法
01-01
在用django写一个类别更新的时候同时更新子类的parentcode, 如果是自己写原生的sql的话，很好解决。但既然用 django 就用 django 的 orm 去实现: 最简单的方法: MyModel.objects.filter(parentcode=ori_code)....
毕业设计-web端自定义截图插件原生JS版.zip
最新发布
04-26
祝愿你在这个毕业设计项目中取得巨大进步，顺利毕业！ 但还需强调一下，这些项目源码仅供学习和研究之用。在使用这些资源时，请务必遵守学术诚信原则和相关法律法规，不得将其用于任何商业目的或侵犯他人权益的行为...
Vue实现项目重新部署后通知用户刷新网页
我不会敲代码
04-21 2774
各位小伙伴是否在项目上线后被用户问到：不是说新功能今天上线吗，怎么没看见。你：刷新下页面或者清除一下缓存用户：怎么清除缓存你：‍‍‍‍‍‍‍‍😫远程吧！或者是一个bug你明明已经修改并上线了，但是用户依然说bug存在，等等，为了让用户能够及时使用到新功能，就得解决这个问题。
前端项目部署自动检测更新后通知用户刷新页面（前端实现，技术框架vue、js、webpack）——方案一：编译项目时动态生成一个记录版本号的文件
金乌的博客
11-27 2818
当我们重新部署前端项目的时候，如果用户一直停留在页面上并未刷新使用，会存在功能使用差异性的问题，因此，当前端部署项目后，需要提醒用户有去重新加载页面。编译项目时动态生成一个记录版本号的文件。轮询（20s、自己设定时间）这个文件，判断版本号，有新版本则通知用户刷新页面。
浏览器清缓存硬性刷新_如何硬刷新您的Web浏览器（绕过缓存）
culiyuan8310的博客
09-24 4383
浏览器清缓存硬性刷新Sometimes, a website does not behave as expected or seems stuck showing outdated information. To fix this, it’s easy to force your browser to completely reload its local copy of the page (ca...
静态html内容如何修改,如何设置网页静态内容缓存时间（Apache）
weixin_36308848的博客
06-04 872
为什么要设置网页静态内容缓存时间对于网页上变化很少的静态资源，可以通过设置客户端缓存时间，减少请求，加快页面加载速度，SEO加分。网页加载速度越快，排名越好。如何设置首先，开启LoadModule expires_module modules/mod_expires.so模块。然后，在httpd.conf中添加如下内容：# enable expirationsExpiresActive OnExp...
【原创】我所理解的自动更新-外网web服务器配置
weixin_30784141的博客
03-30 84
ClientDownload和ClientUpdate共享渠道配置信息: channel-0.php //以appstore的渠道为例 1 <?php 2 define('APPNAME', 'TOKENAPPNAME');//应用版本号 3 define('SERVER_MAJOR_VERSION', 'TOKENMAJORVER');//最新应用版...
uni-app的H5端在不显示原生导航栏时怎么设置页面标题
05-27
1. 在需要设置标题的页面中，可以在 `onLoad` 生命周期函数中使用 `uni.setNavigationBarTitle` 方法来隐藏原生导航栏，例如： ``` onLoad() { uni.setNavigationBarTitle({ title: '' }); } ``` 2. 然后在页面...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值