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() %>"

打赏一下吧

感觉解决了你的问题，给点打赏吧