blocks|key|1468413|text|看看雅虎！提示：https://developer.yahoo.com/performance/rules.html#expires。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1468414|还有来自谷歌的小贴士：https://developers.google.com/speed/docs/insights/LeverageBrowserCaching|1468415|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.yahoo.com/performance/rules.html#expires|1|https://developers.google.com/speed/docs/insights/LeverageBrowserCaching^0|8|1M|0|0|B|20|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

Have a look at Yahoo! tips: <a href="https://developer.yahoo.com/performance/rules.html#expires" rel="nofollow noreferrer">https://developer.yahoo.com/performance/rules.html#expires</a>. 

There are also tips by Google: <a href="https://developers.google.com/speed/docs/insights/LeverageBrowserCaching" rel="nofollow noreferrer">https://developers.google.com/speed/docs/insights/LeverageBrowserCaching</a>

blocks|key|1683691|text|或在.htaccess文件中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1683692|AddOutputFilter+DEFLATE+css+js
ExpiresActive+On
ExpiresByType+application/x-javascript+A2592000|code-block|syntax|javascript|1683693|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

or in the .htaccess file

<pre><code>AddOutputFilter DEFLATE css js
ExpiresActive On
ExpiresByType application/x-javascript A2592000
</code></pre>

blocks|key|1683728|text|在您的Apache+.htaccess文件中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1683729|#Create+filter+to+match+files+you+want+to+cache+
<Files+*.js>
Header+add+"Cache-Control"+"max-age=604800"
</Files>|code-block|syntax|javascript|1683730|我也在这里写过：|1683731|http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/|offset|length|1683732|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|28|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

In your Apache .htaccess file:

<pre><code>#Create filter to match files you want to cache 
&lt;Files *.js&gt;
Header add "Cache-Control" "max-age=604800"
&lt;/Files&gt;
</code></pre>

I wrote about it here also:

<a href="http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/" rel="noreferrer">http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/</a>

blocks|key|1468456|text|最好的(也是唯一的)方法是设置正确的HTTP头，特别是这些头："Expires“、"Last-Modified”和"Cache-Control“。具体方法取决于您使用的服务器软件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1468457|在Improving+performance…中，查找“服务器端优化”以获取一般注意事项和相关链接，并查找“客户端缓存”以获取特定于Apache的建议。|offset|length|1468458|如果你像我一样是nginx+(或nginx+in+plain+English)的粉丝，你也可以很容易地配置它：|1468459|location+/images+{
++...
++expires+4h;
}|code-block|syntax|javascript|1468460|在上面的示例中，来自/images/的任何文件都将在客户机上缓存4小时。|1468461|现在，当您知道要查找的正确单词(HTTP头"Expires“、"Last-Modified”和"Cache-Control")时，只需仔细阅读您使用的web服务器的文档。|1468462|entityMap|0|LINK|mutability|MUTABLE|url|http://lazutkin.com/blog/2007/feb/1/improving-performance/|1|http://sysoev.ru/nginx/|2|http://nginx.net/^0|0|1|M|0|0|8|5|1|G|M|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]|$D|1B|E|1C|1|1D]]|A|$]]|$1|H|3|I|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1F|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]|10|$5|T|U|V|A|$W|11]]]]

The best (and only) method is to set correct HTTP headers, specifically these ones: "Expires", "Last-Modified", and "Cache-Control". How to do it depends on the server software you use.

In <a href="http://lazutkin.com/blog/2007/feb/1/improving-performance/" rel="nofollow noreferrer">Improving performance&hellip;</a> look for "Optimization on server side" for general considerations and relevant links and for "Client-side cache" for the Apache-specific advice.

If you are a fan of <a href="http://sysoev.ru/nginx/" rel="nofollow noreferrer">nginx</a> (or <a href="http://nginx.net/" rel="nofollow noreferrer">nginx in plain English</a>) like I am, you can easily configure it too:

<pre><code>location /images {
 ...
 expires 4h;
}
</code></pre>

In the example above any file from /images/ will be cached on the client for 4 hours.

Now when you know right words to look for (HTTP headers "Expires", "Last-Modified", and "Cache-Control"), just peruse the documentation of the web server you use.

blocks|key|1683822|text|我有一个简单的纯JavaScript系统。它检查从未缓存的简单文本文件中的更改。当您上传新版本时，此文件会发生更改。只需将以下JS放在页面顶部即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1683823|​|1683824|++++++++(function(url,+storageName)+{
++++++++++++var+fromStorage+=+localStorage.getItem(storageName);
++++++++++++var+fullUrl+=+url+%2B+"?rand="+%2B+(Math.floor(Math.random()+*+100000000));
++++++++++++getUrl(function(fromUrl)+{
//+++++++++++++++++++first+load
++++++++++++++++if+(!fromStorage)+{
++++++++++++++++++++localStorage.setItem(storageName,+fromUrl);
++++++++++++++++++++return;
++++++++++++++++}
//++++++++++++++++++++old+file
++++++++++++++++if+(fromStorage+===+fromUrl)+{
++++++++++++++++++++return;
++++++++++++++++}
++++++++++++++++//+files+updated
++++++++++++++++localStorage.setItem(storageName,+fromUrl);
++++++++++++++++location.reload(true);
++++++++++++});
++++++++++++function+getUrl(fn)+{
++++++++++++++++var+xmlhttp+=+new+XMLHttpRequest();
++++++++++++++++xmlhttp.open("GET",+fullUrl,+true);
++++++++++++++++xmlhttp.send();
++++++++++++++++xmlhttp.onreadystatechange+=+function()+{
++++++++++++++++++++if+(xmlhttp.readyState+===+XMLHttpRequest.DONE)+{
++++++++++++++++++++++++if+(xmlhttp.status+===+200+%7C%7C+xmlhttp.status+===+2)+{
++++++++++++++++++++++++++++fn(xmlhttp.responseText);
++++++++++++++++++++++++}
++++++++++++++++++++++++else+if+(xmlhttp.status+===+400)+{
++++++++++++++++++++++++++++throw+'unable+to+load+file+for+cache+check+'+%2B++url;
++++++++++++++++++++++++}
++++++++++++++++++++++++else+{
+++++++++++++++++++++++++++throw+'unable+to+load+file+for+cache+check+'+%2B++url;
++++++++++++++++++++++++}
++++++++++++++++++++}
++++++++++++++++};
++++++++++++}
++++++++++++;
++++++++})("version.txt",+"version");|code-block|syntax|javascript|1683825|1683826|只需将"version.txt“替换为您始终运行的文件，并将"version”替换为您想要用于本地存储的名称。|1683827|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

I have a simple system that is pure JavaScript. It checks for changes in a simple text file that is never cached. When you upload a new version this file is changed. Just put the following JS at the top of the page.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> (function(url, storageName) {
 var fromStorage = localStorage.getItem(storageName);
 var fullUrl = url + "?rand=" + (Math.floor(Math.random() * 100000000));
 getUrl(function(fromUrl) {
// first load
 if (!fromStorage) {
 localStorage.setItem(storageName, fromUrl);
 return;
 }
// old file
 if (fromStorage === fromUrl) {
 return;
 }
 // files updated
 localStorage.setItem(storageName, fromUrl);
 location.reload(true);
 });
 function getUrl(fn) {
 var xmlhttp = new XMLHttpRequest();
 xmlhttp.open("GET", fullUrl, true);
 xmlhttp.send();
 xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState === XMLHttpRequest.DONE) {
 if (xmlhttp.status === 200 || xmlhttp.status === 2) {
 fn(xmlhttp.responseText);
 }
 else if (xmlhttp.status === 400) {
 throw 'unable to load file for cache check ' + url;
 }
 else {
 throw 'unable to load file for cache check ' + url;
 }
 }
 };
 }
 ;
 })("version.txt", "version");</code></pre>
</div>
</div>


just replace the "version.txt" with your file that is always run and "version" with the name you want to use for your local storage.

Which is the best method to make the browser use cached versions of js files (from the serverside)?

caching JavaScript files

服务器

让浏览器使用js文件的缓存版本(从服务器端)最好的方法是什么？

问缓存JavaScript文件
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问缓存JavaScript文件EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问缓存JavaScript文件
EN