分享
是一种美德

web自动更新版本号清理js、css文件的缓存

问题描述
在web项目开发过程中,我们经常会引用css、js文件,更新文件后常出现缓存问题(明明更改了代码,在浏览器上访问的时候却没有发生变化),这种情况我们通常采用以下两种解决方案:

1、手动清除浏览器缓存,开发人员F12会清理,但你不能这样要求客户。
2、添加版本号(如 layout.css?v=1),每次稍微修改css、js文件,都要更新v后面的数字,麻烦

解决方案
方法一:可以通过js自动给html添加版本号

<script type="text/javascript">
		document.write("<link rel='stylesheet' type='text/css' href='/css/layout.css?v="+new Date().getTime()+"'>"); 
		document.write('<script  type='text/javascript'  src="http://localhost:8000/aaaa.js?v='+Math.random()+'"><\/script>');
</script>

方法二:若是jsp页面,可以使用java代码生成时间戳(若是jsp页面用方法一也行,但此方法更方便)

 <link rel="stylesheet" type="text/css" href="/css/layout.css?v=<%=System.currentTimeMillis() %>">
   <script type="text/javascript" src="<%=ctx %>/js/idvalid.js?v=<%=System.currentTimeMillis() %>" charset="utf-8"></script>

最优方案

以上方案虽然可以防止 js 的缓存了,但是每次刷新页面都会重新生成一个版本号,重新拉取 js 文件,导致不必要的网络开销,稍微修改了一下,使用了 sessionStorage 和时间戳,基本满足了需求了。
方法三:全web页面通用

<script type="text/javascript">
	var timestamp = new Date().getTime();
	var versionStamp = sessionStorage.version;
	if (versionStamp == null || (timestamp - versionStamp) > 1800000) {
	 sessionStorage.version = timestamp;
	}
	document.write("<script type='text/javascript' src='js/index_tool.js?v="+sessionStorage.version+"'><"+'/'+"script>");
	document.write("<link rel='stylesheet' type='text/css' href='/css/layout.css?v="+sessionStorage.version+"'>"); <\/script>');
</script>

我的建议

本人开发jsp,建议使用最简单的方法二,现在网速都是200M的,还在乎这点网络开销?

?v=<%=System.currentTimeMillis() %>"

————————————————
版权声明:本文为CSDN博主「治政」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/xyzz609/java/article/details/89327096

分享按钮
赞(1)
转载请注明来源地址:MN乐享 » web自动更新版本号清理js、css文件的缓存

评论 抢沙发

评论前必须登录!