кэширование файлов JavaScript

Question

Какой лучший способ заставить браузер использовать кэшированные версии файлов js (со стороны сервера)?

Answer 1

Посмотрите на Yahoo! Советы: https://developer.yahoo.com/performance/rules.html#expires.

Есть также советы от Google: https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

Answer 2

или в файле .htaccess

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

Answer 3

Я только что закончил свой проект на выходные cached-webpgr.js который использует localStorage / веб-хранилище для кэширования файлов JavaScript. Этот подход очень быстрый. Мой маленький тест показал

• Загрузка jQuery из CDN: Chrome 268мс , FireFox: 200мс
• Загрузка jQuery из локального хранилища: 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');
});

Answer 4

Из 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

Answer 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/

Answer 6

У меня большой соблазн закрыть это как дубликат; на этот вопрос, по-видимому, отвечают по-разному по всему сайту:

• Будет ли кэшироваться скрипт в теге html с расширением php?
• Когда браузер автоматически очищает кэш внешнего файла JavaScript?
• Помощь с агрессивным кэшированием JavaScript
• Как управлять кэшированием веб-страниц во всех браузерах?
• Как я могу заставить браузер видеть изменения CSS и Javascript?

Answer 7

У меня есть простая система, которая является чистым 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");

просто замените «version.txt» на ваш файл, который всегда запускается, а «version» на имя, которое вы хотите использовать для локального хранилища.

Answer 8

Лучший (и единственный) метод - установить правильные заголовки HTTP, а именно: «Истекает», «Последнее изменение» и «Контроль кэша». Как это сделать, зависит от используемого вами серверного программного обеспечения.

В Повышение производительности & hellip; ищите «Оптимизация на стороне сервера» для общих соображений и соответствующих ссылок, а также «Кэш на стороне клиента» для рекомендаций по Apache.

Если вы являетесь поклонником nginx (или nginx на простом английском ), как я, вы можете легко настроить его тоже:

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

В приведенном выше примере любой файл из / images / будет кэшироваться на клиенте в течение 4 часов.

Теперь, когда вы знаете правильные слова для поиска (заголовки HTTP «Expires», «Last-Modified» и «Cache-Control»), просто просмотрите документацию веб-сервера, который вы используете.