关于浏览器缓存，版本更新问题

因为浏览器缓存的原因，如果在发布新版本的时候，如何让客户端的静态文件同步更新。

通常办法：一般都是在js文件引入的时候在末尾带上时间

<script type="text/javascript" src="/static/js/DateUtil.js?t=20170221"></script>

优化思路：在html中动态引入js文件

<script type="text/javascript">var head = document.getElementsByTagName("head")[0];var script = document.createElement('script');var timestamp = new Date().getTime();var s = '/static/js/config.js?t=' + timestamp;script.type = 'text/javascript';script.src = s;script.onload = function () {console.info('onload');loadJS("index");};head.appendChild(script);<#--loadJS("index");-->
</script>

config.js

/*** Created by User on 2017/2/21.*/
var JSHash = {index: [{url:"/static/js/DateUtil.js", version: "1.0"},{url:"/static/easyui/js/jquery.easyui.min.js", version: "1.0"}]// edit:  [{url:"http://xxxx.js", version: "2.0"}]
};
function loadJS(sKey) {var head = document.getElementsByTagName("head")[0];var node = JSHash[sKey];for(var i =0;i < node.length; i ++) {var script = document.createElement('script');script.type = 'text/javascript';script.src = node[i].url + '?version='+node[i].version;console.info(script.src);script.onload = function () {console.info("node"+i)};// document.writeln('<script src="'+node[i].url+'?version='+node[i].version+'"><\/script>');head.appendChild(script);}
}

但是这样有一个问题就是js文件载入需要时间，页面在一瞬间调用需要动态载入的js文件函数，报错。

思考：如何引入js版本控制，有什么好办法？

关于浏览器缓存，版本更新问题相关推荐

版本更新带来的缓存问题_浏览器缓存原理总结
作者: Poetry 来源:http://blog.poetries.top/2019/01/02/browser-cache/ 一.浏览器缓存基本认识分为强缓存和协商缓存 1.浏览器在加载资源时, ...
浏览器缓存导致FLASH资源更新问题的解决方案
在网上搜浏览器缓存问题时,遇上了很多问题.一是不知道应该用何种关键字搜索,二是一搜出来,就全是讲的是如何禁用浏览器缓存的方案. 作为大型点的FLASH WEBGAME来说,不缓存显然是不行的.总体上来 ...
nuxt 更新部署因浏览器缓存导致页面错误解决方法
部署nuxt项目后更新项目后部分页面会发生错误,无法进入,但是清除浏览器缓存和无痕模式正常显示查原因查了大半天,后发现主要原因是因为项目更新后浏览器进行本地缓存解决方法保证版本更新时与上版本文件名 ...
微信H5、网页、内置Web浏览器清理缓存，微信浏览器缓存
目录一.写在前面: 1.浏览器缓存带来的好处: 2.浏览器缓存带来的弊端: 二.如何清除微信浏览器的缓存: 1.在IOS环境下手动清除微信缓存: 2.在Android环境下手动清除微信缓存: 三.清 ...
浏览器缓存网站静态文件
当用户第一次访问你的网站时,让用户的浏览器缓存网站的静态文件,如图片\CSS\JS等,然后接访问接下来的页面就会直接调用浏览器的缓存而不是重新从服务器下载,这样既节省带宽和流量又加快了用户打开网页的速 ...
同源策略禁止读取位于_用浏览器缓存绕过同源策略（SOP）限制
本文分享的Writeup是作者在做Keybase.io的漏洞众测中发现的SOP(同源策略)绕过漏洞,由于Keybase.io在用的多个API端点都启用了CORS(跨域资源共享)机制,这种缓解同源策略的 ...
浏览器缓存和webpack缓存配置
网络请求会耗费大量时间和请求,如果可以重用为改变的网络资源,对于用户来说可以更快更流畅的查看网页,对于服务器来说减少了很多负荷,所以浏览器缓存是前端优化的重要内容.本文介绍了浏览器缓存的机制和缓存在w ...
禁止Chrome浏览器缓存
为什么80%的码农都做不了架构师?>>> 禁止Chrome浏览器缓存 HTML: <META HTTP-EQUIV="pragma" CONTENT= ...
apache下用expires_module让浏览器缓存静态文件
apache下用expires_module让浏览器缓存静态文件 apache配置静态缓存的原因: 第一点, 减轻服务器的压力. 第二点, 省去浏览器经常要去服务端下载CSS. ...
给url添加时间戳，解决浏览器缓存
//解决浏览器缓存function timestamp(url){// var getTimestamp=Math.random();var getTimestamp=new Date().getTi ...

关于浏览器缓存，版本更新问题

关于浏览器缓存，版本更新问题

关于浏览器缓存，版本更新问题相关推荐

最新文章

热门文章