w3h5

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

wordpress-html-css-js1.png 为什么网站中的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文件后面的问号起不到实际作用,仅能当作后缀,如果用问号加参数的方法,可以添加版本号等信息,同时可以刷新一下浏览器端的缓存。一个小小的细节,可以给我们带来很大的方便。


赞 (0)
分享到: +More |

评论 沙发

换个身份