君语贤
时光静好,与君语;细水流年,与君同;繁华落尽,与君老...

实用小技巧>运维相关>正文

HTML页面自动清理js、css文件的缓存(自动添加版本号)

2019-06-15 17:46 君语贤css文件缓存版本号自动添加自动清理页面

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

1、手动清除浏览器缓存

2、添加版本号(如 layout.css?v=1)

个人认为方法2更快,因为清除浏览器缓存还要等浏览器响应。但是每次更改版本号也很麻烦,所以需要想办法自动添加版本号,

HTML页面自动清理js、css文件的缓存(自动添加版本号)

以下是本人收集的方法:

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

<script type="text/javascript">  
document.write("<link rel='stylesheet' type='text/css' href='/css/layout.css?v="+new Date().getTime()+"'>");   
</script>

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

<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<%=System.currentTimeMillis() %>">

方法三:使用其他的方法添加版本号,如用node.js自动配置等

ps:我们清除缓存的目的是为了及时看到页面的更新情况,当我们将页面上线时(即部署到正式环境,不会再做更改),建议把版本号固定,因为有缓存的页面访问更快,需要更新的时候再更换下固定版本号。

方法四:直接通过全局变量设置

比如在织梦后台可以设置一个全局变量,值自己随便填写,比如可以以最后的修改日期作为版本号也可以,这样就可以有效解决缓存问题,尤其是开了CDN的。

本文链接:https://www.weguiding.com/yuwei/523.html