Какой лучший способ заставить браузер использовать кешированные версии js файлов (с серверов)?
Кеширование файлов JavaScript
Ответ 1
Посмотрите на Yahoo! tips: http://developer.yahoo.com/performance/rules.html#expires.
Есть также советы от Google: https://developers.google.com/speed/docs/best-practices/caching
Ответ 2
или в файле .htaccess
AddOutputFilter DEFLATE css js
ExpiresActive On
ExpiresByType application/x-javascript A2592000
Ответ 3
От 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 M Y H:i:s', time()+$expires).'GMT');
ob_end_flush();
return;
}
работает для меня.
Как разработчик вы, вероятно, быстро столкнетесь с ситуацией, когда вы не хотите кэшировать файлы, и в этом случае см. Справка с агрессивным кешированием JavaScript
Ответ 4
Я только что закончил проект на выходные cached-webpgr.js который использует хранилище localStorage/web для кэширования файлов JavaScript. Этот подход очень быстрый. Мой небольшой тест показал
- Загрузка jQuery из CDN: Chrome 268ms, FireFox: 200 мс
- Загрузка jQuery из localStorage: Chrome 47 мс, FireFox 14 мс
Код для этого крошечный, вы можете проверить его в моем проекте 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');
});
Ответ 5
В файле 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/
Ответ 6
Я сильно соблазн закрыть это как дубликат; на этот вопрос, по-видимому, ответят по-разному по всему сайту:
Ответ 7
Лучший (и единственный) метод - установить правильные заголовки HTTP, в частности, следующие: "Истекает", "Последнее изменение" и "Кэш-контроль". Как это сделать, зависит от используемого вами серверного программного обеспечения.
В Improving performance… найдите "Оптимизацию на стороне сервера" для общих соображений и соответствующих ссылок и для "кеша на стороне клиента" для специфический для Apache совет.
Если вы являетесь поклонником nginx (или nginx на простом английском языке), как и я, вы также можете легко настроить его:
location /images {
...
expires 4h;
}
В приведенном выше примере любой файл из/images/будет кэшироваться на клиенте в течение 4 часов.
Теперь, когда вы знаете правильные слова для поиска (заголовки HTTP "Expires", "Last-Modified" и "Cache-Control" ), просто просмотрите документацию используемого веб-сервера.
Ответ 8
У меня простая система, которая является чистым JavaScript. Он проверяет изменения в простом текстовом файле, который никогда не кэшируется. Когда вы загружаете новую версию, этот файл изменяется. Просто поставьте следующий 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");