cachingJavaScript文件
使浏览器使用js文件的caching版本（从服务器端）是最好的方法？
看看雅虎！ 提示： http : //developer.yahoo.com/performance/rules.html#expires 。
还有Google提示： https ： //developers.google.com/speed/docs/best-practices/caching
或在.htaccess文件中
AddOutputFilter DEFLATE css js ExpiresActive On ExpiresByType application/x-javascript A2592000 从PHP：
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 MYH:i:s', time()+$expires).'GMT'); ob_end_flush(); return; }
为我工作。
作为一名开发人员，您可能很快就会遇到不想要文件caching的情况，在这种情况下，请参阅“ 积极进行JavaScriptcaching的帮助”
我刚刚完成了我的周末项目cached-webpgr.js ，它使用localStorage / web存储来cachingJavaScript文件。 这种方法非常快。 我的小testing显示
- 从CDN加载jQuery：Chrome 268ms ，FireFox： 200ms
- 从localStorage加载jQuery：Chrome 47ms ，FireFox 14ms
实现这个代码很小，你可以在我的Github项目https://github.com/webpgr/cached-webpgr.js查看;
这里是一个完整的例子如何使用它。
完整的库：
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'); });
在你的Apache .htaccess文件中：
#Create filter to match files you want to cache <Files *.js> Header add "Cache-Control" "max-age=604800" </Files>
我也在这里写过：
http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/
我非常想要把它作为一个副本来closures它。 这个问题似乎在整个网站上以许多不同的方式回答：
- 将扩展PHP的HTML脚本标记脚本将被caching？
- 浏览器什么时候自动清除外部JavaScript文件的caching？
- 帮助积极的JavaScriptcaching
- 如何在所有浏览器上控制网页caching？
- 如何让浏览器看到CSS和Javascript的变化？
但对于现代浏览器，你可以使用这样的新东西： http : //www.w3schools.com/html/html5_app_cache.asp
最好的（也是唯一的）方法是设置正确的HTTP头，特别是“Expires”，“Last-Modified”和“Cache-Control”。 怎么做取决于你使用的服务器软件。
在提高性能…寻找“优化在服务器端”的一般考虑和相关的链接和“客户端caching”为Apache的具体build议。
如果你是像我这样的nginx （或简单英语的nginx）的粉丝，你也可以轻松configuration它：
location /images { ... expires 4h; }
在上面的例子中，来自/ images /的任何文件都将被caching在客户端上4个小时。
现在当你知道正确的词语（HTTP头文件“Expires”，“Last-Modified”和“Cache-Control”）时，只需仔细阅读所使用的Web服务器的文档即可。
我有一个简单的系统是纯粹的JavaScript。 它检查从不caching的简单文本文件中的更改。 当您上传新版本时，此文件已更改。 只要把下面的JS放在页面的顶部。
(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");
