缓存JavaScript文件

让浏览器使用缓存版本的js文件（从服务器端）的最佳方法是什么

function OutputJs($Content) 
{   
    ob_start();
    echo $Content;
    $expires = DAY_IN_S; // 60 * 60 * 24 ... defined elsewhere
    header("Content-type: x-javascript");
    header('Content-Length: ' . ob_get_length());
    header('Cache-Control: max-age='.$expires.', must-revalidate');
    header('Pragma: public');
    header('Expires: '. gmdate('D, d M Y H:i:s', time()+$expires).'GMT');
    ob_end_flush();
    return; 
}   

对我有用

---

作为开发人员，您可能很快就会遇到不希望缓存文件的情况，在这种情况下，请参见

或.htaccess文件

AddOutputFilter DEFLATE css js
ExpiresActive On
ExpiresByType application/x-javascript A2592000

---

我很想把它作为复制品来结束；在整个网站上，这个问题似乎有许多不同的答案：

---

在Apache.htaccess文件中：

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

#创建筛选器以匹配要缓存的文件
标题添加“缓存控制”“最大年龄=604800”

我在这里也写过：

---

看看雅虎！提示：

Google也提供了一些提示：

最好（也是唯一）的方法是设置正确的HTTP头，特别是这些头：“Expires”、“Last Modified”和“Cache Control”。如何操作取决于您使用的服务器软件

在中，查找“服务器端优化”的一般注意事项和相关链接，以及“客户端缓存”的Apache特定建议

如果您是（或）我的粉丝，您也可以轻松配置：

location /images {
  ...
  expires 4h;
}

在上面的示例中，来自/images/的任何文件都将在客户端上缓存4小时

---

现在，当您知道要查找的正确单词（HTTP标题“Expires”、“Last Modified”和“Cache Control”）时，只需仔细阅读您使用的web服务器的文档。

我刚刚完成了我的周末项目cached webpgr.js 它使用localStorage/web存储缓存JavaScript文件。这种方法非常快。我的小测试显示

• 从CDN加载jQuery:Chrome268ms，FireFox:200ms
• 从本地存储加载jQuery:Chrome47ms，FireFox14ms

实现这一点的代码很小，您可以在我的Github项目中查看它

下面是如何使用它的完整示例

完整库：

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)};

给图书馆打电话

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){
    requireScript('examplejs', '0.0.3', 'example.js');
});

---

我有一个纯JavaScript的简单系统。它检查从不缓存的简单文本文件中的更改。上载新版本时，此文件会发生更改。只需将以下JS放在页面顶部

（函数（url、storageName）{
var fromStorage=localStorage.getItem（storageName）；
var fullUrl=url+“？rand=“+（Math.floor（Math.random（）*100000000））；
getUrl（函数（fromUrl）{
//第一批
如果（！fromStorage）{
setItem（storageName，fromUrl）；
回来
}
//旧文件
if（fromStorage==fromUrl）{
回来
}
//文件更新
setItem（storageName，fromUrl）；
位置。重新加载（true）；
});
函数getUrl（fn）{
var xmlhttp=new XMLHttpRequest（）；
open（“GET”，fullUrl，true）；
xmlhttp.send（）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==XMLHttpRequest.DONE）{
if（xmlhttp.status==200 | | xmlhttp.status==2）{
fn（xmlhttp.responseText）；
}
else if（xmlhttp.status==400）{
抛出“无法加载缓存检查文件”+url；
}
否则{
抛出“无法加载缓存检查文件”+url；
}
}
};
}
;
})（“version.txt”，“version”）似乎是一个很好的通用社区维基问题的候选人？这显然是很多人需要抓挠的地方。^问题没有提到Apache，所以。。。任何东西都是有效的，C也是有效的。