49
Welches ist die beste Methode, um den Browser dazu zu bringen, zwischengespeicherte Versionen von js-Dateien zu verwenden (serverseitig)?JavaScript-Dateien zwischenspeichern
A
Antwort
21
einen Blick auf Yahoo! Haben Tipps: http://developer.yahoo.com/performance/rules.html#expires.
Es gibt auch Tipps von Google: https://developers.google.com/speed/docs/best-practices/caching
6
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;
}
Arbeiten für mich.
Als Entwickler werden Sie wahrscheinlich schnell in die Situation kommen, die Sie tun nicht Dateien wollen zwischengespeichert, wobei in diesem Fall sehen Help with aggressive JavaScript caching
21
oder in der .htaccess-Datei
AddOutputFilter DEFLATE css js
ExpiresActive On
ExpiresByType application/x-javascript A2592000
2
I bin stark versucht, das als Duplikat zu schließen; Diese Frage scheint auf viele verschiedene Arten auf der ganzen Seite zu beantworten:
+0
Scheint wie ein guter Kandidat für eine allgemeine communitywiki Frage dann? Es ist offensichtlich ein Juckreiz, dass viele Leute zerkratzt werden müssen. – Ken
4
In Ihrem Apache .htaccess-Datei :
#Create filter to match files you want to cache
<Files *.js>
Header add "Cache-Control" "max-age=604800"
</Files>
schrieb ich darüber hier auch:
http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/
0
Der beste (und einzigen) Methode ist korrekt HTTP-Header, die speziell diese hier einzustellen: "Gültig", "Last-Modified" und "Cache-Control" . Wie es geht, hängt von der Serversoftware ab, die Sie verwenden.
In Improving performance… suchen Sie nach "Optimierung auf Server-Seite" für allgemeine Überlegungen und relevante Links und für "Client-Side-Cache" für die Apache-spezifische Beratung.
Wenn Sie ein Fan von nginx (oder nginx in plain English) sind, wie ich bin, können Sie es leicht konfigurieren:
location /images {
...
expires 4h;
}
In dem obigen Beispiel eine beliebige Datei von/images/wird auf dem Client zwischengespeichert werden für 4 Stunden.
Jetzt, wenn Sie wissen, nach richtigen Wörtern zu suchen (HTTP-Header "Expires", "Last-Modified" und "Cache-Control"), lesen Sie einfach die Dokumentation des von Ihnen verwendeten Webservers.
6
Ich habe gerade mein Wochenende Projekt im Cache-webpgr.js , die die localstorage/Web-Speicher verwendet JavaScript-Dateien zwischenzuspeichern. Dieser Ansatz ist sehr schnell.Mein kleiner Test zeigte
- Laden jQuery von CDN: Chrome 268ms, FireFox: 200ms
- Laden jQuery von localstorage: Chrome 47ms, FireFox 14ms
Der Code um das zu erreichen, ist es winzig, du kannst es bei 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)};
Aufruf 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');
});
0
ich ein einfaches System, das reine JavaScript ist. Es prüft auf Änderungen in einer einfachen Textdatei, die nie zwischengespeichert wird. Wenn Sie eine neue Version hochladen, wird diese Datei geändert. Legen Sie einfach das folgende JS oben auf die 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");nur die „version.txt“ mit Ihrer Datei ersetzen, die immer und „Version“ mit dem Namen, den Sie für Ihre lokalen Speicher verwenden möchten, ausgeführt wird.
^Die Frage erwähnt Apache nicht, also ... irgendetwas ist gültig, C wäre auch gültig gewesen. –