为什么网站中的CSS或JS会带有v或version参数

在查看网页源码的时候经常会发现带有类似 ?v=13566 或者 ?version=15678 的 CSS 和 JS 文件。如下所示：

<script src="w3h5.js?version=15688″></script>
<link rel="stylesheet" href="w3h5.css?version=23389"/>

加参数的静态资源有两种可能：  

第一、脚本并不存在，而是服务端动态生成的。

因此带上版本号，以示区别。即上面代码对于文件来说就是：

<script src="w3h5.js″></script>
<link rel="stylesheet" href="w3h5.css"/>

不过浏览器则不会这么认为，它会认为这是该文件的某个版本。

第二、客户端会缓存这些CSS或JS文件，每次更新了 JS 或 CSS 文件后，改变版本号，客户端浏览器就会重新下载新的JS或CSS文件，起到刷新缓存的作用。

大家有时候会发现修改了CSS样式或者JS文件，刷新页面的时候不变，是因为客户端缓存了 CSS 或者 JS 文件，导致修改不省心，这时候清一下缓存或者强制刷新一下就好了，因此加上参数还是有一定好处的！

原理：

例如 .htaccess 设置的 CSS、JS 缓存都有一个过期时间，如果在访客的浏览器中已经缓存了这些文件，在这些缓存未过期之前，浏览器只会优先从缓存中读取这些 CSS 和 JS 文件，如果你在服务器上修改了这些文件，浏览器端是不会立马发生变化的，除非访客按了 Ctrl + F5 强制刷新或者手动清空了浏览器的缓存。一个网站的访客成千上万，你不可能在更新 CSS 后让每个访客都刷新一下缓存，那么这个问题你会怎么处理呢？

方法一：更改CSS文件名

其实解决这个问题很简单，缓存是通过文件名标记缓存的内容的。在你更新了网站的 CSS 文件后，在更换一下 CSS 的文件名就可以了。如原先HTML中的CSS调用语句如下：

<link rel="stylesheet" href="style.css" />

 改一下文件名就可以了：

<link rel="stylesheet" href="index.css" />

另外一种更改CSS文件名的方法是将版本号写到文件名中，如：

<link rel="stylesheet" href="index.v2011.css" />

CSS 文件更新后，改一下文件名中的版本号即可：

<link rel="stylesheet" href="index.v2012.css" />

方法二：给CSS文件添加版本号

每次修改 CSS 文件后还要修改文件名确实有点麻烦，我们可以在加载 CSS 语句中加入版本号就可以了。如原先 HTML 中的 CSS 调用语句如下：

<link rel="stylesheet" href="style.css?v=2019" />

改一下 CSS 文件的版本号改成2020就可以了：

<link rel="stylesheet" href="style.css?v=2020" />

注意：部分代理缓存服务器不会缓存网址中包含 "?" 的资源，所以方法二可能会导致你原先的缓存功能失效，可以改用第一种方法。

总结：

其实CSS文件后面的问号起不到实际作用，仅能当作后缀，如果用问号加参数的方法，可以添加版本号等信息，同时可以刷新一下浏览器端的缓存。一个小小的细节，可以给我们带来很大的方便。

未经允许不得转载：前端资源网 - w3h5 » 为什么网站中的CSS或JS会带有v或version参数