为什么开发人员要在 JavaScript 文件的样式表链接中附加查询字符串?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/24354119/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 02:37:35  来源:igfitidea点击:

Why do developers append a query string in JavaScript files' stylesheet links?

javascriptcss

提问by user3699274

I have seen this in many sites:

我在很多网站都看到过这个:

<script src="/file.js?query=string"></script>

<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/stackoverflow/all.css?v=86c1a91ea87b">
<link rel="apple-touch-icon image_src" href="//cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png?v=fd7230a85918">

Why are developers passing a query string for these scripts and stylesheets, etc.?

为什么开发人员要为这些脚本和样式表等传递查询字符串?

Update:I agree this is duplicate But can you tell me how to 'search' to get those original questions?

更新:我同意这是重复的但是你能告诉我如何“搜索”来获得那些原始问题吗?

回答by Thank you

This is used for invalidating caches.

这用于使缓存无效

Check out this brief (albeit old) explanation: http://css-tricks.com/update-on-css-caching/

看看这个简短的(虽然旧的)解释:http: //css-tricks.com/update-on-css-caching/

When the query string is updated, it forces the client's browser to download an updated copy of the stylesheet or script.

当查询字符串更新时,它会强制客户端的浏览器下载样式表或脚本的更新副本。

回答by Joe Enos

One thing that can be used for is to force the browser to re-pull scripts or stylesheets, by changing the query string. That way, in case the file ever changes, and the site wants to force any users to pull the new one instead of using a cached copy, they just change the query string.

可用于的一件事是通过更改查询字符串强制浏览器重新拉取脚本或样式表。这样,万一文件发生更改,并且站点想要强制任何用户拉取新文件而不是使用缓存副本,他们只需更改查询字符串。

For example:

例如:

<script src="//whatever.com/something.js"></script>

If you have this on your page, then a browser will pull it down once, then probably cache it for awhile, so every time your page loads, they'll use the cached copy unless they have a reason to try to re-pull (like F5-refreshing the page).

如果你的页面上有这个,那么浏览器会把它拉下来一次,然后可能会缓存一段时间,所以每次你的页面加载时,他们都会使用缓存的副本,除非他们有理由尝试重新拉(如 F5-刷新页面)。

If you use a random query string, then once you change your query string in your markup, the browser has to go pull a new one, since the browser thinks it's a new file (regardless of whether or not it actually is). And the content server will ignore the query string parameters on static files, so it doesn't care what you put:

如果您使用随机查询字符串,那么一旦您更改了标记中的查询字符串,浏览器就必须拉出一个新文件,因为浏览器认为它是一个新文件(不管它是否真的是)。并且内容服务器将忽略静态文件上的查询字符串参数,因此它不在乎您放置了什么:

<script src="//whatever.com/something.js?v=12345"></script>

The browser will grab the file again, whether it needs it or not.

无论是否需要,浏览器都会再次抓取该文件。

<script src="//whatever.com/something.js?v=98765"></script>

Now it will do it again.

现在它会再次这样做。

回答by Zaheer Ahmed

The developers of a web application which are in evolving stage and get changed often encounter the issue that their JavaScript code or CSS changes do not start working until you clear the cache of browser. In case of a live application, you cannot ask users to clear the cache, so to ensure that changes start working developers append the query string to CSS or JavaScript files.

处于发展阶段并发生变化的 Web 应用程序的开发人员经常会遇到这样的问题,即在您清除浏览器缓存之前,他们的 JavaScript 代码或 CSS 更改无法开始工作。对于实时应用程序,您不能要求用户清除缓存,因此为确保更改开始工作,开发人员将查询字符串附加到 CSS 或 JavaScript 文件。

The reason to do this is because browsers cache the GET calls, so multiple calls to JavaScript, that is,

这样做的原因是因为浏览器缓存了 GET 调用,所以对 JavaScript 的多次调用,也就是,

<script src="//example.com/myscript.js"></script>

will not always get the new copy so to overcome this query-string helps:

不会总是得到新的副本,所以克服这个查询字符串有帮助:

<script src="//example.com/myscript.js?v=62345"></script>

Any random unique data as query string tells the browser that it is a different call from the previous one, so it always get the new copy. Stack Overflow is also using this technique.

任何作为查询字符串的随机唯一数据都会告诉浏览器它与前一个调用不同,因此它始终获取新副本。Stack Overflow 也在使用这种技术。

That caching is helpful in cases when your files never get changed or rarely change like a jQuery file that is the reason it is recommended to use a CDNfor these files as it already get cached by some other website.

这种缓存在您的文件从未更改或很少更改(如 jQuery 文件)的情况下很有帮助,这就是建议对这些文件使用CDN的原因,因为它已被其他网站缓存。

回答by Alex W

One possibility besides attempting to prevent the CSS from being cached is that those sites are generating their files server-side. The original question, before it was edited to change its meaning, was asking about "scripts and style sheets etc". Because I saw the script element first, which doesn't have a value appended to it that looks like a hash value, my answer would be that it's possible that they are trying to roll all of their scripts into a single file to cut down on HTTP requests, which will speed up their site. That is a recommended best practicefor speeding up your site by Yahoo.

除了试图阻止缓存 CSS 之外,一种可能性是这些站点正在服务器端生成它们的文件。最初的问题在被编辑以改变其含义之前,是询问“脚本和样式表等”。因为我首先看到了脚本元素,它没有附加一个看起来像散列值的值,我的回答是他们可能试图将所有脚本滚动到一个文件中以减少HTTP 请求,这将加速他们的网站。这是Yahoo推荐的加速网站的最佳实践

After pulling together the appropriate files, the server can then save them to a file as a cached version and avoid fetching everything dynamically again unless the individual pieces are updated.

将适当的文件放在一起后,服务器可以将它们作为缓存版本保存到一个文件中,并避免再次动态获取所有内容,除非各个部分被更新。

If I was using PHP:

如果我使用的是 PHP:

$page = $_GET['query'];

switch($page)
{
    case 'homepage':
      /* There would be some code here, checking to see if there's 
       * a cached version that could be served up, before doing the 
       * extra work of rolling the scripts together */
      foreach($scripts as $script)
          $combined_script_file .= $script;
      echo $combined_script_file;
      ...
    break;
    case 'blog':
      ...
}

There are plenty of different use cases for server-side processing of files. This is just one.

服务器端文件处理有很多不同的用例。这只是其中之一。