专栏首页前端资源为什么网站中的CSS或JS会带有v或version参数

为什么网站中的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 条评论
登录 后参与评论

相关文章

  • VMware虚拟机安装黑苹果MacOS Mojave系统详细教程

    然后发现,XCode 是专门为苹果的 MacOS 系统设计的一款开发工具。没办法,只能安装一个黑苹果 MacOS 系统,先试试效果了。

    德顺
  • 获取当天是本月的第几周的星期几,并用中文显示

    德顺
  • Linux创建、编辑文件、目录管理、文件解压及删除命令整理总汇

    例:$ touch hello.txt 如果 hello.txt 文件不存在,则创建文件,如果存在,则修改 hello.txt 所有的时间为当前系统的时间。

    德顺
  • css-in-js 探讨

    Web开发是需要掌握多种技术。我们习惯于与多种语言密切合作。而且,随着开发Web应用程序变得越来越普遍和差别细微化,我们经常寻找创造性的方法来弥合这些语言之间的...

    frontoldman
  • Chrome的First Paint触发的时机探究

    用户1749219
  • Chrome的First Paint触发的时机探究

    用户1749219
  • [ISUX译]我为css变量狂 - 腾讯ISUX

    腾讯ISUX
  • SAP CRM Collection wrapper的publish_current用法

    在进入product detail页面时,在初始化context node CREATE_CONTEXT_NODES方法里,会依次调用Product sub n...

    Jerry Wang
  • Mysql分库分表方案 转

    当一张表的数据达到几千万时,你查询一次所花的时间会变多,如果有联合查询的话,我想有可能会死在那儿了。分表的目的就在于此,减小数据库的负担,缩短查询时间。

    阿dai学长
  • CentOS 7.2 Yum安装MySQL 5.6

    版权声明:本文为木偶人shaon原创文章,转载请注明原文地址,非常感谢。 https://b...

    shaonbean

扫码关注云+社区

领取腾讯云代金券