Web-Entwicklung: localStorage-vs.-Cache HTTP

Sagen wir mal ich habe eine web-server als Antwort auf eine GET mit .json - Datei. Die Antwort auf diese zu BEKOMMEN gibt an, dass der browser-cache die Antwort für 5 Jahre.

Lassen Sie uns auch sagen, ich habe eine web-Seite, die macht, die GET-Anforderung für die JSON-Daten, wenn die Seite geladen wird. Wenn die Antwort zurück kommt, die JSON-Daten ist in localStorage.

An diesem Punkt, wenn ich will abrufen möchten, die JSON-Daten wieder, die werden schneller:

  1. Holen es aus localStorage
  2. Der Ausführung eines anderen Ajax-GET-request (wo der browser nicht wirklich die Anforderung-es wird Zugriff auf den browser-cache statt)

Können Sie beweisen es mit einem automatisierten test-oder Beispiel?

Warum ist Ihre Antwort korrekt?

InformationsquelleAutor FarahBoBara | 2011-08-21
  1. 9

    Ich denke du hast die falsche Frage gestellt. Die ist schneller während einer aktiven Sitzung ist im Grunde irrelevant, denn beide sind lokal gespeichert, und die lokale nachschlagen ist fast augenblicklich (vs remote-lookup). (Ein Nachteil: nicht alle Browser setzen auf die caching-Header, aber in der Regel lehnt sich mehr in Richtung über-caching, eher als unter-caching.)

    Jedoch, Ihre situation Beispiel ist die Annahme, dass der browser-cache wird nie gelöscht. Das ist falsch, in Allgemeinen: nicht nur kann der Benutzer den cache löschen, Wann immer (oder habe es auf auto-klar), aber der browser selbst kann entscheiden, zu entfernen Ihre Webseite zwischengespeicherten Daten werden (je nach Raum, in der Regel).

    Stattdessen sollten Sie denken über die Langlebigkeit der Daten, und wie regelmäßig wird der Benutzer auf der Suche nach es wieder.

    Wenn diese information ist etwas, dass Sie vielleicht nur gelegentlich Zugang, dann sollten Sie sich auf den integrierten caching-Mechanismus des Browsers. Dies ermöglicht dem browser, um es zu entfernen, wenn es nicht mehr benötigt wird.

    Jedoch, wenn die Daten etwas geladen wird regelmäßig, bzw. nach Bedarf bei jedem Zugriff auf die Website haben, dann sollten Sie mit localStorage. Die lokale Speicherung ist nicht automatisch gelöscht mit cache und in der Tat ist in der Regel nur geleert, wenn der Benutzer löscht die cookies für diese website. Diese können die Informationen aufbewahrt werden, für viel länger, auch wenn die website nicht besucht regelmäßig genug, um den cache aktualisiert. Aber Sie wird nun plötzlich dafür verantwortlich, dass die Datenbank mit Informationen.

    Schließlich die wichtigste Frage: als Entwickler, ist das Kosten-nutzen-trade-off der Entwicklung einer komplexen localStorage-basierte Lösung Wert? In anderen Worten, sind Sie gehen, um zu sehen, genug Vorteil für den Endbenutzer-caching-1-2s-lookup, oder sprechen Sie eine erhebliche Menge an Informationen, in denen der Benutzer 30s+ gewinnen.

    Als Beispiel für eine große, komplexe web-Anwendung, die ich entwickelt habe, eine Weile zurück, die ich verwendet localStorage speichern, um die große Anzahl von JS-Bibliotheken. Beim erneuten Besuch der Website, Sie waren einfach analysiert aus der lokalen Kopie (nach der überprüfung des hash). Diese Lösung erlaubt eine Breite Palette von Browsern, um zu sehen, eine massive Verminderung der Startzeit, auch wenn der cache gelöscht wurde. (Ich sage ja nicht, das ist ein guter Einsatz, aber es arbeitete in der Zeit.)

    InformationsquelleAutor OverZealous
  2. 3

    Beide Quellen behaupten, dass localStorage-beats browser-cache-Speicher in der Geschwindigkeit.

    Hier ist mein nehmen auf das laden von JavaScript-Dateien aus dem localStorage. Der code ist winzig, Sie können check it out auf meinem Github-Projekt https://github.com/webpgr/cached-webpgr.js oder der Benutzer den code aus dem vollständigen Beispiel.

    Die vollständige 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');
});
    InformationsquelleAutor select
  3. -3

    Unterschiede, wenn einer dieser beiden Ansätze sollte vernachlässigbar sein in der modernen UAs (Browser).

    Warum meine Antwort richtig ist, Fragen Sie? Weil ich implementiert diese beiden Mechanismen.

    InformationsquelleAutor c-smile
Schreibe einen Kommentar