如何解决HTML5页面js,css缓存问题

我们开发web项目的时候，如果更新了某个css文件，部署到服务器，发现在浏览器访问的时候，并没有什么变化，这是因为浏览器缓存了之前的旧的css文件。如果过一段时间之后再访问，就会发现页面有了变化，这说明浏览器更新了最新的css文件。

那么怎么才能使我们修改的css或js文件立马生效呢？

如果每次都强制更新最新的文件，这样做从效率上来讲又不是很好。我们还是希望有缓存的，只是当我们修改了文件之后，才立马把这个缓存更新掉。

下面介绍一种最简单的方法：

就是在引用的js或css文件后面加版本号v=xxx。

比如原来代码是下面这样：

<link href="css/mycss.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/myjs.js"></script>

我们可以改成下面这样：

<link href="css/mycss.css?v=100" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/myjs.js?v=100"></script>

后面新加的?v=100就是相当于一个版本号。如果该版本号没有变化，浏览器就不会更新缓存。如果我们需要修改css文件，就可以把版本号改成v=101，当我们再次访问页面的时候，浏览器发现版本号变了，就会拿最新的css文件，即更新缓存，这样就达到我们的目的了。

是不是很简单？如果解决了您的问题，那就没白写~

分享技术，分享快乐！欢迎打赏~