Zwischenspeichern von JavaScript-Dateien

Was ist die beste Methode, um den Browser dazu zu bringen, zwischengespeicherte Versionen von js-Dateien (von der Serverseite) zu verwenden?

Schau mal bei Yahoo! Tipps: https://developer.yahoo.com/performance/rules.html#expires.

Es gibt auch Tipps von Google: https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

oder in der .htaccess-Datei

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

Ich habe gerade mein Wochenendprojekt abgeschlossen cached-webpgr.js
die den localStorage / Webspeicher verwendet, um JavaScript-Dateien zwischenzuspeichern. Dieser Ansatz ist sehr schnell. Mein kleiner Test hat es gezeigt

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

Der Code, um das zu erreichen, ist winzig, Sie können ihn sich in meinem Github-Projekt ansehen 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)};

Anruf in der Bibliothek

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

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 nicht möchten, dass Dateien zwischengespeichert werden. In diesem Fall lesen Sie die Hilfe zum aggressiven JavaScript-Caching

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 hier auch darüber geschrieben:

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

Ich bin sehr versucht, dies als Duplikat zu schließen; Diese Frage scheint auf der ganzen Website auf viele verschiedene Arten beantwortet zu werden:

• Wird ein Skript im Skript-Tag von HTML mit der Erweiterung PHP zwischengespeichert?
• Wann löscht der Browser automatisch den Cache der externen JavaScript-Datei?
• Hilfe bei aggressivem JavaScript-Caching
• Wie steuert man das Caching von Webseiten in allen Browsern?
• Wie kann ich den Browser dazu bringen, CSS- und Javascript-Änderungen anzuzeigen?

Die beste (und einzige) Methode besteht darin, korrekte HTTP-Header zu setzen, insbesondere diese: „Expires“, „Last-Modified“ und „Cache-Control“. Wie das geht, hängt von der verwendeten Serversoftware ab.

In Verbessernde Leistung… Suchen Sie nach “Optimierung auf Serverseite” für allgemeine Überlegungen und relevante Links und nach “Client-seitiger Cache” für Apache-spezifische Ratschläge.

Wenn Sie ein Fan von sind nginx (oder nginx im Klartext) wie ich, 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, nach denen Sie suchen müssen (HTTP-Header „Expires“, „Last-Modified“ und „Cache-Control“), lesen Sie einfach die Dokumentation des von Ihnen verwendeten Webservers.