HTML5 führt die Anwendungs -Cache -Technologie ein, was bedeutet, dass Webanwendungen ohne Netzwerk zwischengespeichert und verwendet werden können.
Die drei Vorteile, die von Anwendungs -Cache mitgebracht wurden, sind:
① Offline stöbern Sie
② Erhöhen Sie die Gesichtseinkommensgeschwindigkeit der Seite
③ den Serverdruck reduzieren
Und der Hauptbrowser wird durch die Unterstützung von Anwendungs -Cache unterstützt.
Offline -SpeichertechnologieHTML5 schlägt zwei wichtige Offline -Speicher -Technologie vor: Lokalstor- und Anwendungs -Cache mit jeweils eigenen Anwendungsszenarien;
Nach der Praxis glauben wir, dass LocalStorage einige nicht kritische Ajax -Daten speichern und den Kuchen erledigen sollte.
Der Anwendungs -Cache wird weiterhin verwendet, um statische Ressourcen zu speichern, und es ist immer noch eine Frage der trockenen Glasur.
Und Cookies können nur einen kleinen Absatz -Text speichern (4096 Bytes). von Cookies erledigt.
Daher ist das Anwendungsszenario des Anwendungs -Cache unterschiedlich, daher ist die Verwendung nicht konsistent.
Anwendungs -Cache -EinführungAnwendungs -Cache verwendet zwei Aspekte:
① Der Server muss eine Manifestliste verwalten
② Es gibt nur eine einfache Einstellung im Browser
<html Manifest = Demo.Appcache>
Um das Beispiel zu erklären:
Cache Manifestcache:# Die Liste von Cache style1.css1.jpg01.jshttp: //localhost/applicationcache/02.jshttp: //localhost/application/zepto.jsnetw Ork:# 4.jpgfallback:## After the Access Cache fällt, das The Access Cache, das The The the the the the the the the the access, das the the the the the the the the the the the the the the access Die Ressource des Ersatzzugriffs ist die erste die Quelle des Zugriffs, die zweite besteht darin, die Datei*.html /offline.html2.jpg/3.jpg zu ersetzen
Zunächst habe ich hier einen Fehler gemeldet:
Anwendungs -Cache -Fehlerereignis: Manifestfetch fehlgeschlagen (404)
Der Grund für diesen Fehler ist, dass die Manifest-Datei den richtigen MIME-Typ konfigurieren muss, dh Text/Cache-Manifest. Muss auf dem Webserver konfiguriert werden, sind verschiedene Server unterschiedlich
/ApplicationCache 01.js 02.js 1.jpg 2.jpg 3.jpg 4.jpg Demo.Appcache Index.html style1.css style2.css web.config Zepto.js
Auf diese Weise können Sie es offline anwenden.
Es ist hier zu bemerken.
Manifestierte Dateien können in drei Teile unterteilt werden:
Cache Manifest -Die in diesem Titel aufgeführte Datei wird nach dem ersten Download zwischengespeichert
NETWORK -DEDE DATEN, die in diesem Titel aufgeführt sind
Fallback -Die in diesem Titel aufgeführten Dateien haben vorhanden
Wie in der Abbildung gezeigt, definiert HTML5 mehrere Ereignispunkte, aber wir verwenden JS in den meisten Fällen nicht aktiv, um etwas zu bedienen.
DimensionDie Größengrenze des Anwendungs -Cache ist bei 5 m einheitlich. Ich mache hier einen Test:
Wie gezeigt, überschreiten die beiden CSS -Dateien zu diesem Zeitpunkt noch 5 m
Das Dokument wurde aus dem Anwendungs -Cache mit Manifest http: //localhost/applicationcache/demo.appcacheIndex.html: 1 Anwendungs -Cache -Überprüfung von Dex.html: 6 GET http: //localhost/applicationcache/style2.css net: 1 Anwendung Cache Noupdate EventIndex.html: 11 Get http: //localhost/applicationcache/2.jpg net :: err_fairdindex.html: 12 GetP: // localhost/Application/3.jpg net :: err_faird
Wie gezeigt, kann Style2 nicht mehr durchführen. Welche Probleme verursachen dies?
Zum Beispiel verwaltet Channel A einen eigenen Anwendungs -Cache, und Kanal B hat sich zu diesem Zeitpunkt auch.
Es wird empfohlen, dass Anwendungs -Cache, öffentliche Ressourcen speichern, keine Geschäftsressourcen speichern
Einige ProblemeAus Sicht des Update -Mechanismus, wenn das Manifest zum ersten Mal aktualisiert wurde, ist das Cache -Update nicht abgeschlossen, und der Browser verwendet weiterhin abgelaufene Ressourcen. wird aktualisiert. Zu diesem Zeitpunkt wurde das Ereignis für das Fenster. Reload wurde im Update -Event ausgeführt.
Window.applicationcache.addeVentListener (updateready, function () {window.location.reload ()});Aus dem obigen Beispiel kann bekannt sein, dass der Cache nicht nur die Definitionsdatei ist, z. Appcache -Datei.
Zum Beispiel nehmen wir hier eine Änderung vor:
<html manifest = Demo.Appcache> => <html Manifest = Demo1.Appcache>
Wenn Sie zu diesem Zeitpunkt keine Demo.Appcache -Updates erstellen, wird der Cache nicht aktualisiert, da index.html zwischenstrich
Jede Seite verwaltet einheitlich eine eigene Manifestliste, was bedeutet, dass die Seite A mit Common.js konfiguriert ist und die B -Seite auch mit Common.js konfiguriert ist, was bedeutet, dass nach der Aktualisierung der Seite, wenn das Manifest auf der B -Seite wird nicht geändert, die Seite B wird noch gelesen.
ZusammenfassenIn Bezug auf die Verfügbarkeit und die Benutzerfreundlichkeit ist der Anwendungs -Cache verwendet, aber es ist am besten, statische Ressourcen zu leiten.