Heim > Artikel > Web-Frontend > Was ist der HTML5-Caching-Mechanismus? So aktualisieren Sie den Cache

Was ist der HTML5-Caching-Mechanismus? So aktualisieren Sie den Cache

云罗郡主Original: 2019-01-04 10:45:177402Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Frage, was der HTML5-Caching-Mechanismus ist. Wie man den Cache aktualisiert, hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. [Empfohlene Lektüre: Html5-Tutorial]

Hintergrund

Offline-Caching ist eine neue Funktion von HTML5. Mit der von HTML5 bereitgestellten Offline-Caching-Funktion können Sie einige häufig verwendete Dateien der Website lokal zwischenspeichern und auch dann auf die zwischengespeicherten Seiten zugreifen, wenn kein Netzwerk vorhanden ist. Es gibt viele Dateitypen, die zwischengespeichert werden können, einschließlich, aber nicht beschränkt auf, HTML, CSS, JS, statische Bildressourcen usw.

Tatsächlich wird Offline-Caching nicht nur verwendet, wenn kein Netzwerk vorhanden ist. Wenn ein Netzwerk vorhanden ist, werden weiterhin lokal zwischengespeicherte Dateien verwendet. Wenn ein Netzwerk vorhanden ist, gibt der Browser 200 zurück.

Offline-Caching hat viele Vorteile. Erstens kann es die Benutzererfahrung effektiv verbessern und den Benutzerverkehr reduzieren. Zweitens kann die Seitenladegeschwindigkeit verbessert und zwischengespeicherte Ressourcen schneller geladen werden. Drittens kann die Serverlast reduziert werden und der Browser lädt nur aktualisierte oder geänderte Ressourcen vom Server herunter.

Browser-Unterstützung

Im Grunde unterstützen es alle Mainstream-Browser, außer IE, was schließlich seltsam ist. Es ist besser, nicht mit dieser Art von Browser kompatibel zu sein.

Manifest

Um Offline-Caching auf einer Seite zu verwenden, müssen Sie nur ein Manifest-Attribut zum HTML der Seite hinzufügen. Die Verwendungsmethode ist wie folgt.

<!DOCTYPE HTML>
<html manifest = "cache.appcache">
<body>…</body>
</html>

Wenn der Browser die Seite lädt und feststellt, dass der HTML-Code das Attribut manifest hat, fordert er die Datei „cache.appcache“ an (ps: Dies ist nur ein Dateiname, der im Allgemeinen mit „.appcache“ endet), und die Datei wird normalerweise im Stammverzeichnis des Projekts abgelegt)

übrigens: Die Manifestdatei muss den MIME-Typ auf „text/cache-manifest“ konfigurieren, was notwendig ist. Sie müssen es auf dem Server konfigurieren.

Sehen wir uns an, wie die Manifestdatei (cache.appcache) geschrieben werden sollte

Ich habe diese Informationen von w3School gefunden:

CACHE MANIFEST – unter diesem Titel Dateien aufgeführt wird nach dem ersten Download zwischengespeichert

NETZWERK – Die unter dieser Überschrift aufgeführten Dateien erfordern eine Verbindung zum Server und werden nicht zwischengespeichert

FALLBACK – Die unter dieser Überschrift aufgeführten Dateien erfordern die Fallback-Seite, wenn die Seite geöffnet wird kann nicht zugegriffen werden (z. B. 404-Seite)

cache.appcache-Datei lautet wie folgt

# CACHE MANIFEST是必须的！
CACHE MANIFEST
/style.css
/logo.png
/app.js
# 不缓存的文件，永远不会被缓存，且离线时是不可用的
NETWORK:
login.js
# 可以使用星号来指示所有其他资源/文件都需要因特网连接：
NETWORK:
*
# 注释：获取不到资源时的备选路径，就跳转到指定页面
FALLBACK:
index.html 404.html

So aktualisieren Sie den Cache

Wie am Anfang des Artikels erwähnt, durchsuchen Wenn der Server feststellt, dass im HTML-Code eine Manifestdatei vorhanden ist, fordert er zunächst die Datei „cache.appcache“ an und speichert sie dann basierend auf dem Inhalt der Manifestdatei im Cache. Der spezifische Prozess ist wie folgt:

Wenn Sie online sind und zum ersten Mal auf die Anwendung zugreifen, lädt der Browser die entsprechenden Ressourcen basierend auf dem Inhalt der Manifestdatei herunter und speichert sie offline. Wenn auf die Anwendung zugegriffen wurde und die Ressourcen offline gespeichert wurden, verwendet der Browser die Offline-Ressourcen zum Laden der Seite und vergleicht dann die neue Manifestdatei mit der alten Manifestdatei. Wenn sich die Datei nicht geändert hat, nein Der Vorgang wird ausgeführt. Wenn sich die Datei ändert, werden die Ressourcen in der Datei erneut heruntergeladen und offline gespeichert.

Im Offline-Modus nutzt der Browser direkt den lokalen Cache. Haben Sie ein Problem festgestellt? Was passiert, wenn der Browser nach der Aktualisierung des Codes immer noch den ursprünglichen Cache verwendet?

Die einfachste und gröbste Möglichkeit besteht darin, den Cache des Browsers manuell zu leeren. Dies wird in einer Produktionsumgebung natürlich nicht in großem Umfang durchgeführt.

So ändern Sie das Manifest

Zeilen, die mit „#“ beginnen, sind Kommentare, können aber auch für andere Zwecke verwendet werden. Der Cache der Anwendung wird aktualisiert, wenn sich ihre Manifestdatei ändert. Wenn Sie ein Bild bearbeiten oder eine JavaScript-Funktion ändern, werden diese Änderungen nicht erneut zwischengespeichert. Das Aktualisieren des Datums und der Versionsnummer in der Kommentarzeile ist eine Möglichkeit, den Browser zu veranlassen, die Datei erneut zwischenzuspeichern.

Das obige ist der detaillierte Inhalt vonWas ist der HTML5-Caching-Mechanismus? So aktualisieren Sie den Cache. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html5 css html JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was sind die neuen Funktionen von HTML5? Detaillierte Erläuterung der neuen Funktionen von HTML5Nächster Artikel：Was sind die neuen Funktionen von HTML5? Detaillierte Erläuterung der neuen Funktionen von HTML5

In Verbindung stehende Artikel

Mehr sehen