entityMap|blocks|key|300169|text|这样可以确保您从服务器获取css或js文件的最新版本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|300170|稍后，如果您有较新的版本和"?v=3",+"?v=4"，则可以附加"?v=2"，依此类推。|offset|length|style|CODE|300171|请注意，您可以使用任何querystring，'v‘不是必须的，例如：|300172|"?blah=1“也会起作用。|300173|和|300174|"?xyz=1002"将起作用。|300175|这是一种常见的技术，因为浏览器现在缓存js和css文件更好、更长。|300176^0|0|D|E|X|6|0|B|B|0|0|8|0|0|0|B|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|T|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|U|9|@$E|V|F|W|G|H]|$E|X|F|Y|G|H]]|A|@]|B|$]]|$2|I|4|J|6|7|8|Z|9|@$E|10|F|11|G|H]]|A|@]|B|$]]|$2|K|4|L|6|7|8|12|9|@$E|13|F|14|G|H]]|A|@]|B|$]]|$2|M|4|N|6|7|8|15|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|16|9|@$E|17|F|18|G|H]]|A|@]|B|$]]|$2|Q|4|R|6|7|8|19|9|@]|A|@]|B|$]]|$2|S|4|-4|6|7|8|1A|9|@]|A|@]|B|$]]]]

This makes sure you are getting the latest version from of the css or js file from the server.

And later you can append <code>"?v=2"</code> if you have a newer version and <code>"?v=3", "?v=4"</code> and so on.

Note that you can use any <code>querystring</code>, 'v' is not a must for example:

<code>"?blah=1</code>" will work as well.

And 

<code>"?xyz=1002"</code> will work.

And this is a common technique because browsers are now caching js and css files better and longer.

entityMap|blocks|key|3028678|text|这些通常是为了确保当网站使用新版本更新时，浏览器会获得新版本，例如，作为构建过程的一部分，我们会有如下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3028679|/Resources/Combined.css?v=x.x.x.buildnumber|code-block|syntax|javascript|3028680|由于每次推送新代码时都会发生变化，因此客户端不得不获取一个新版本，这仅仅是因为querystring。例如，请查看此页面(在回答此问题时)：|3028681|<link+...+href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">|3028682|我认为这个团队使用的不是修订号，而是文件散列，这是一种更好的方法，即使是在新的版本中，浏览器也只有在文件实际发生变化时才会强制获取新版本。|3028683|这两种方法都允许您将缓存头设置为非常长的值，比如20+years...yet当它发生变化时，您不必担心缓存头，浏览器会看到不同的查询字符串，并将其视为不同的新文件。|3028684^0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Q|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|R|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|S|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|T|9|@]|A|@]|B|$F|G]]|$2|L|4|M|6|7|8|U|9|@]|A|@]|B|$]]|$2|N|4|O|6|7|8|V|9|@]|A|@]|B|$]]|$2|P|4|-4|6|7|8|W|9|@]|A|@]|B|$]]]]

These are usually to make sure that the browser gets a new version when the site gets updated with a new version, e.g. as part of our build process we'd have something like this:

<pre><code>/Resources/Combined.css?v=x.x.x.buildnumber
</code></pre>

Since this changes with every new code push, the client's forced to grab a new version, just because of the querystring. Look at this page (at the time of this answer) for example:

<pre><code>&lt;link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d"&gt;
</code></pre>

I think instead of a revision number the SO team went with a file hash, which is an even better approach, even with a new release, the browsers only forced to grab a new version when the file actually changes. 

Both of these approaches allow you to set the cache header to something ridiculously long, say 20 years...yet when it changes, you don't have to worry about that cache header, the browser sees a different querystring and treats it as a different, new file.

entityMap|blocks|key|297914|text|Javascript文件通常被浏览器缓存的时间比您预期的要长得多。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|297915|当您发布新版本的JS文件时，这通常会导致意外的行为。|297916|因此，通常的做法是将QueryString参数添加到javascript文件的URL。这样，浏览器就会用v=1缓存Javascript文件，当你发布一个新版本的javascript文件时，你把url改成v=2，浏览器就会被迫下载一个新的副本。|297917^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|I|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|J|9|@]|A|@]|B|$]]|$2|G|4|-4|6|7|8|K|9|@]|A|@]|B|$]]]]

Javascript files are often cached by the browser for a lot longer than you might expect.

This can often result in unexpected behaviour when you release a new version of your JS file.

Therefore, it is common practice to add a QueryString parameter to the URL for the javascript file. That way, the browser caches the Javascript file with v=1. When you release a new version of your javascript file you change the url's to v=2 and the browser will be forced to download a new copy.

entityMap|blocks|key|3243132|text|当你想知道本地web文件夹中文件的版本时，散列解决方案很不错，但不是真正的人类可读的。解决方案是使用date/time标记您的版本，以便您可以轻松地将其与您的服务器文件进行比较。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3243133|例如，如果.js+or+.css文件的日期为2011-02-08+15:55:30+(上次修改)，则版本应等于.js?v=20110208155530|3243134|应易于读取任何语言的任何文件的属性。在ASP.Net中，这真的很简单...|3243135|".js?v="+%2B+File.GetLastWriteTime(HttpContext.Current.Request.PhysicalApplicationPath+%2B+filename).ToString("yyMMddHHHmmss");|code-block|syntax|javascript|3243136|首先，把它很好地重构到属性/函数中，然后就可以开始了。别再找借口了。|3243137|祝你好运，阿特|3243138^0|1E|9|0|5|B|M|J|1J|K|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|U|9|@$A|V|B|W|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|X|9|@$A|Y|B|Z|C|D]|$A|10|B|11|C|D]|$A|12|B|13|C|D]]|E|@]|F|$]]|$2|I|4|J|6|7|8|14|9|@]|E|@]|F|$]]|$2|K|4|L|6|M|8|15|9|@]|E|@]|F|$N|O]]|$2|P|4|Q|6|7|8|16|9|@]|E|@]|F|$]]|$2|R|4|S|6|7|8|17|9|@]|E|@]|F|$]]|$2|T|4|-4|6|7|8|18|9|@]|E|@]|F|$]]]]

The hash solution is nice but not really human readable when you want to know what version of file is sitting in your local web folder. The solution is to <code>date/time</code> stamp your version so you can easily compare it against your server file. 

For example, if your <code>.js or .css</code> file is dated <code>2011-02-08 15:55:30</code> (last modification) then the version should equal to <code>.js?v=20110208155530</code>

Should be easy to read properties of any file in any language. In ASP.Net it's really easy...

<pre><code>".js?v=" + File.GetLastWriteTime(HttpContext.Current.Request.PhysicalApplicationPath + filename).ToString("yyMMddHHHmmss");
</code></pre>

Of coz get it nicely refactored into properties/functions first and off you go. No more excuses.

Good luck, Art.

entityMap|0|type|LINK|mutability|MUTABLE|data|url|http://web.archive.org/web/20131128161333/http://www.tapankumar.in/2013/10/how-to-make-versioning-for-css-and-js-files.html|blocks|key|303156|text|为了回答你的问题；|unstyled|depth|inlineStyleRanges|entityRanges|303157|"?v=1"这只是为了下载css和js文件的最新副本，而不是从浏览器的缓存中使用。|offset|length|style|BOLD|303158|如果您在样式表或js文件的末尾提到此查询字符串参数，则会强制浏览器下载一个新文件，因此最近对.css和.js文件所做的更改将在您的浏览器中生效。|303159|如果您不使用此版本控制，那么您可能需要清除缓存以刷新页面，以便查看这些文件中的最新更改。|303160|这里有一篇文章解释了这个东西How+and+Why+to+make+versioning+of+CSS+and+JS+files|303161^0|0|0|6|0|0|0|E|1E|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|V|G|@]|H|@]|6|$]]|$A|I|C|J|2|E|F|W|G|@$K|X|L|Y|M|N]]|H|@]|6|$]]|$A|O|C|P|2|E|F|Z|G|@]|H|@]|6|$]]|$A|Q|C|R|2|E|F|10|G|@]|H|@]|6|$]]|$A|S|C|T|2|E|F|11|G|@]|H|@$K|12|L|13|A|14]]|6|$]]|$A|U|C|-4|2|E|F|15|G|@]|H|@]|6|$]]]]

In order to answer you questions;
&quot;?v=1&quot; this is written only beacuse to download a fresh copy of the css and js files instead of using from the cache of the browser.
If you mention this query string parameter at the end of your stylesheet or the js file then it forces the browser to download a new file, Due to which the recent changes in the .css and .js files are made effetive in your browser.
If you dont use this versioning then you may need to clear the cache of refresh the page in order to view the recent changes in those files.
Here is an article that explains this thing <a href="http://web.archive.org/web/20131128161333/http://www.tapankumar.in/2013/10/how-to-make-versioning-for-css-and-js-files.html" rel="nofollow noreferrer">How and Why to make versioning of CSS and JS files</a>

entityMap|blocks|key|3243206|text|在新版本的开发/测试期间，缓存可能是一个问题，因为浏览器、服务器甚至3G电信公司(如果您进行移动部署)都会缓存静态内容(例如JS、CSS、HTML、img)。您可以通过将版本号、随机数或时间戳附加到URL来克服此问题，例如:+JSP：<script+src="js/excel.js?time=<%25=new+java.util.Date()%25>"></script>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3243207|如果您运行的是纯HTML+(而不是服务器页面JSP、ASP、PHP)，服务器将不会为您提供帮助。在浏览器中，链接是在JS运行之前加载的，因此您必须移除链接并使用JS加载它们。|3243208|//+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%2B%2B){
+++++var+el+=+document.createElement('script');
+++++el.src+=+cacheBust[i]%2B"?v="+%2B+Math.random();
+++++document.getElementsByTagName('head')[0].appendChild(el);
}|code-block|syntax|javascript|3243209^0|39|1U|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|O|9|@$A|P|B|Q|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|R|9|@]|E|@]|F|$]]|$2|I|4|J|6|K|8|S|9|@]|E|@]|F|$L|M]]|$2|N|4|-4|6|7|8|T|9|@]|E|@]|F|$]]]]

During development / testing of new releases, the cache can be a problem because the browser, the server and even sometimes the 3G telco (if you do mobile deployment) will cache the static content (e.g. JS, CSS, HTML, img). You can overcome this by appending version number, random number or timestamp to the URL e.g: JSP: <code>&lt;script src="js/excel.js?time=&lt;%=new java.util.Date()%&gt;"&gt;&lt;/script&gt;</code> 

In case you're running pure HTML (instead of server pages JSP, ASP, PHP) the server won't help you. In browser, links are loaded before the JS runs, therefore you have to remove the links and load them with JS.

<pre><code>// 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 &lt; cacheBust.length; i++){
 var el = document.createElement('script');
 el.src = cacheBust[i]+"?v=" + Math.random();
 document.getElementsByTagName('head')[0].appendChild(el);
}
</code></pre>

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://www.npmjs.com/package/gulp-annotate|blocks|key|300339|text|正如您之前所读到的，?v=1确保您的浏览器获得文件的版本1。当你有一个新版本时，你只需附加一个不同的版本号，浏览器就会忘记旧版本并加载新版本。|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|300340|有一个gulp插件可以在构建阶段管理你的文件的版本，所以你不需要手动操作。它很方便，你可以很容易地把它集成到你的构建过程中。这里有个链接：gulp-annotate|BOLD|300341^0|A|4|0|3|4|1X|D|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|Q|G|@$H|R|I|S|J|K]]|L|@]|6|$]]|$A|M|C|N|2|E|F|T|G|@$H|U|I|V|J|O]]|L|@$H|W|I|X|A|Y]]|6|$]]|$A|P|C|-4|2|E|F|Z|G|@]|L|@]|6|$]]]]

As you can read before, the <code>?v=1</code> ensures that your browser gets the version 1 of the file. When you have a new version, you just have to append a different version number and the browser will forget about the old version and loads the new one.

There is a gulp plugin which takes care of version your files during the build phase, so you don't have to do it manually. It's handy and you can easily integrate it in you build process. Here's the link: <a href="https://www.npmjs.com/package/gulp-annotate" rel="nofollow noreferrer">gulp-annotate</a>

entityMap|blocks|key|3028954|text|正如其他人所提到的，这用于前端缓存崩溃。为了实现这一点，我个人发现grunt+cache-bust+npm包很有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3028955^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|D|9|@]|A|@]|B|$]]|$2|C|4|-4|6|7|8|E|9|@]|A|@]|B|$]]]]

As mentioned by others, this is used for front end cache busting. To implement this, I have personally find grunt-cache-bust npm package useful.

I have been looking at a HTML 5 boilerplate template (from <a href="http://html5boilerplate.com/" rel="noreferrer">http://html5boilerplate.com/</a>) and noticed the use of <code>&quot;?v=1&quot;</code> in URLs when referring to CSS and JavaScript files.
<ol>
<li>What does appending <code>&quot;?v=1&quot;</code> to CSS and JavaScript URLs in link and script tags do?</li>
<li>Not all JavaScript URLs have the <code>&quot;?v=1&quot;</code> (example from the sample below: <code>js/modernizr-1.5.min.js</code>). Is there a reason why this is the case?</li>
</ol>
Sample from their <code>index.html</code>:
<pre class="lang-html prettyprint-override"><code>&lt;!-- CSS : implied media=&quot;all&quot; --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css?v=1&quot;&gt;

&lt;!-- For the less-enabled mobile browsers like Opera Mini --&gt;
&lt;link rel=&quot;stylesheet&quot; media=&quot;handheld&quot; href=&quot;css/handheld.css?v=1&quot;&gt;

&lt;!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements &amp; feature detects --&gt;
&lt;script src=&quot;js/modernizr-1.5.min.js&quot;&gt;&lt;/script&gt;

&lt;!------ Some lines removed ------&gt;

&lt;script src=&quot;js/plugins.js?v=1&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/script.js?v=1&quot;&gt;&lt;/script&gt;

&lt;!--[if lt IE 7 ]&gt;
 &lt;script src=&quot;js/dd_belatedpng.js?v=1&quot;&gt;&lt;/script&gt;
&lt;![endif]--&gt;


&lt;!-- yui profiler and profileviewer - remove for production --&gt;
&lt;script src=&quot;js/profiling/yahoo-profiling.min.js?v=1&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/profiling/config.js?v=1&quot;&gt;&lt;/script&gt;
&lt;!-- end profiling code --&gt;
</code></pre>

What does appending "?v=1" to CSS and JavaScript URLs in link and script tags do?

服务器

HTML5

我一直在看一个HTML5样板模板(来自)，并注意到当引用CSS和JavaScript文件时，"?v=1"在URL中的使用。在链接和脚本标记中将"?v=1"附加到CSS和JavaScript URL有什么作用？并不是所有的JavaScript URL都有"?v=1" (以下示例中的示例：js/modernizr-1.5....

问在链接和脚本标记中将"?v=1“附加到CSS和JavaScript URL有什么作用？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在链接和脚本标记中将"?v=1“附加到CSS和JavaScript URL有什么作用？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在链接和脚本标记中将"?v=1“附加到CSS和JavaScript URL有什么作用？
EN