为什么将parameter passing给CSS和JavaScript链接文件,如src =“../ cnt.js?ver = 4.0”?

当我看到很多网站的源代码,parameter passing给链接文件(CSS / JavaScript)。

在堆栈溢出源,我得到了

<script type="text/javascript" src="http://sstatic.net/js/master.js?v=55c7eccb8e19"></script> 

为什么使用master.js?v=55c7eccb8e19

我相信JavaScript / CSS文件不能获取参数。

是什么原因?

这通常是为了防止caching。

假设您部署新应用程序的版本2,并且希望使客户端刷新其CSS,则可以添加此额外参数以指示它应该从服务器重新请求它。 当然也有其他的方法,但是这很简单。

正如其他人所说,这可能是一个尝试控制caching,但我认为最好这样做是通过改变实际的资源名称( foo.v2.js ,而不是foo.js?v=2 )而不是在版本中查询string。 (这并不意味着你必须重命名文件,有更好的方式将该URL映射到底层文件。) 这篇文章虽然四岁,因此在networking世界古老 ,仍然是一个非常有用的讨论。 其中,作者声称你不想使用查询string的版本,因为:

…根据HTTPcaching规范的字母,用户代理不应该使用查询string来cachingURL。 虽然Internet Explorer和Firefox忽略了这一点,Opera和Safari不…

这个陈述可能不完全正确,因为规范实际上说的是

…因为一些应用程序传统上使用带有查询URL(在rel_path部分中包含“?”)的GET和HEAD来执行带有明显副作用的操作,所以caching不得将这种URI的响应视为新鲜, 除非服务器提供明确的到期时间

(最后强调的是我的。)所以只要你还包括显式的caching头,在查询string中使用版本就可以了。 提供浏览器正确执行上述操作。 而代理呢。 你会明白为什么我认为你在实际的资源定位器中使用版本更好,而不是查询参数(这又意味着你不得不经常重命名文件;参见上面链接的文章)。 如果您更改了名称,您将知道浏览器,代理等将获取更新后的资源,这意味着您可以将之前的“名称”设置为永无止境的caching时间,以最大限度地发挥中间caching的优势。

关于:

我相信Js / CSS文件不能获取参数。

仅仅因为返回的结果是JavaScript或CSS资源,并不意味着它是服务器文件系统上的文字文件。 服务器可以根据查询string参数进行处理,并生成自定义的JavaScript或CSS响应。 没有任何理由,我不能configuration我的服务器将所有.js文件路由到(例如)查看查询string的PHP处理程序,并返回一些自定义以匹配给定的字段。 因此,如果我设置了我的服务器, foo.js?v=2可能与foo.js?v=1不同。

这是为了避免浏览器caching文件。 附加的版本名称对JavaScript文件没有影响,但是对于浏览器的caching引擎,它现在看起来像是一个独特的文件。

例如,如果您有scripts.js并且浏览器访问该页面, scripts.js下载并caching(存储)该文件,以加快下一页访问速度。 但是,如果进行更改,浏览器可能无法识别它,直到caching过期。 但是, scripts.js?v2现在使浏览器强制重新获取,因为“名称已更改”(即使它没有,只是内容)。

生成CSS或JavaScript代码的服务器端脚本可以使用它们,但可能只是在文件内容发生更改时才用于更改URI,以便旧的caching版本不会导致问题。

 <script type="text/javascript"> // front end cache bust var cacheBust = ['js/StrUtil.js', 'js/protos.common.js', 'js/conf.js', 'bootstrap_ECP/js/init.js']; for (i=0;i<cacheBust.length;i++){ var el = document.createElement('script'); el.src = cacheBust[i]+"?v=" + Math.random(); document.getElementsByTagName('head')[0].appendChild(el); } </script> 

这是为了强制浏览器重新caching.js文件,如果有任何更新。

你看,当你在一个网站上更新你的JS时,一些浏览器可能已经caching了旧版本(以提高性能)。 Sicne你希望他们使用你的新名字,你可以在名字的查询字段中添加一些东西,并且可以! 浏览器重新获取文件!

这适用于从服务器btw发送的所有文件。

由于javascript和css文件被客户端浏览器caching,所以我们在它们的名字后附加一些数值来提供非caching版本的文件

“我确定JavaScript / CSS文件不能获取参数”

 function getQueryParams(qs) { qs = qs.split("+").join(" "); var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g; while (tokens = re.exec(qs)) { params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]); } return params; } 

这被称为Cache Busting

浏览器将caching文件,包括查询string。 下次更新查询string时,浏览器将被迫下载新版本的文件。

caching清除有各种types,例如:

  • 静态的
  • 约会时间
  • 软件版本
  • 哈希内容

我已经写了一篇关于caching破坏的文章,您可能会发现它有用:

http://curtistimson.co.uk/front-end-dev/what-is-cache-busting/