it-swarm.com.de

zwischenspeichern von JavaScript-Dateien

Welches ist die beste Methode, damit der Browser zwischengespeicherte Versionen von js-Dateien (von der Serverseite) verwendet?

50
Vasil
23
powtac

oder in der .htaccess-Datei

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

Von 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; 
}   

funktioniert bei mir.

Als Entwickler werden Sie wahrscheinlich schnell in die Situation geraten, dass Sie not Dateien zwischengespeichert haben. In diesem Fall lesen Sie Hilfe zum aggressiven JavaScript-Caching

7
Ken

Ich habe gerade mein Wochenendprojekt cached-webpgr.js .__ beendet. verwendet den localStorage/web-Speicher zum Zwischenspeichern von JavaScript-Dateien. Dieser Ansatz ist sehr schnell. Mein kleiner Test hat gezeigt 

  • Laden von jQuery von CDN: Chrome 268ms, FireFox: 200ms
  • Laden von jQuery von localStorage: Chrome 47ms, FireFox 14ms

Der Code, um das zu erreichen, ist winzig. Sie können ihn in meinem Github-Projekt überprüfen https://github.com/webpgr/cached-webpgr.js

Hier ist ein vollständiges Beispiel, wie man es benutzt.

Die komplette Bibliothek:

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)};

Die Bibliothek aufrufen

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');
});
7
select

In Ihrer Apache .htaccess-Datei:

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

Ich habe auch hier darüber geschrieben:

http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/

5
Kalid
2
Kent Fredric

Ich habe ein einfaches System, das aus reinem JavaScript besteht. Es prüft auf Änderungen in einer einfachen Textdatei, die niemals zwischengespeichert wird. Wenn Sie eine neue Version hochladen, wird diese Datei geändert. Setzen Sie einfach die folgende JS oben auf der Seite.

        (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");

ersetzen Sie einfach "version.txt" durch Ihre Datei, die immer ausgeführt wird, und "Version" durch den Namen, den Sie für Ihren lokalen Speicher verwenden möchten.

0
joel Moses

Die beste (und einzige) Methode besteht darin, korrekte HTTP-Header festzulegen, insbesondere die folgenden: "Expires", "Last-Modified" und "Cache-Control". Wie das geht, hängt von der verwendeten Serversoftware ab.

In Verbesserung der Leistung… Suchen Sie nach "Optimierung auf Serverseite", um allgemeine Hinweise und relevante Links zu erhalten, und nach "Clientseitiger Cache" für die Apache-spezifischen Hinweise.

Wenn Sie ein Fan von nginx (oder nginx in einfachem Englisch ) sind, wie ich bin, können Sie es auch einfach konfigurieren:

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

Im obigen Beispiel wird jede Datei aus/images/für 4 Stunden auf dem Client zwischengespeichert.

Wenn Sie nun die richtigen Wörter kennen (HTTP-Header "Expires", "Last-Modified" und "Cache-Control"), lesen Sie einfach die Dokumentation des verwendeten Webservers.

0
Eugene Lazutkin