Heim > Artikel > Web-Frontend > Was ist Anwendungscache?

Was ist Anwendungscache?

零下一度Original: 2018-05-26 11:39:576639Durchsuche

Origin

Webseiten waren vor HTML5 alle verbindungslos und mussten für den Zugriff mit dem Internet verbunden sein. Tatsächlich ist dies der Fall Kein großes Problem für PCs in der heutigen Zeit, aber im Zeitalter des mobilen Internets ist der Standort von Geräteterminals nicht mehr auf drahtlose Signale angewiesen. Die Zuverlässigkeit des Netzwerks hat beispielsweise abgenommen Wenn Sie mit dem Zug fahren und durch einen Tunnel fahren (15 Minuten), können Sie nicht auf die Website zugreifen. Sehr groß, zum Beispiel für Seiten wie „ecmascript Collection“, die zum Lesen gedacht sind.
HTML5 führte die Cache-Manifestdatei ein. Was also ein Cache-Manifest ist, darüber werden wir als nächstes sprechen.

HTML5 führt Anwendungs-Caching ein, was bedeutet, dass Webanwendungen zwischengespeichert und ohne Internetverbindung aufgerufen werden können.
Anwendungs-Caching bringt drei Vorteile für Apps:

Offline-Browsing – Benutzer können Apps nutzen, während sie offline sind

Geschwindigkeit – zwischengespeicherte Ressourcen werden schneller geladen

Server reduzieren Laden – Der Browser lädt nur aktualisierte oder geänderte Ressourcen vom Server herunter.

Unterstützte Versionen

Alle gängigen Browser unterstützen es, außer IE8 und IE9.

Offline-Speichertechnologie

HTML5 schlägt zwei wichtige Offline-Speichertechnologien vor: Localstorage und Application Cache, die beide über traditionelle Anwendungsszenarien verfügen sind Offline-Speichertechnologien für Cookies.

Nach einiger Zeit glauben wir, dass localstorage einige unkritische Ajax-Daten speichern sollte, was das Tüpfelchen auf dem i ist.

Der Anwendungscache wird zum Speichern statischer Ressourcen verwendet , was immer noch das i-Tüpfelchen ist;

Und Cookie kann nur einen kleinen Textabschnitt speichern (4096 Bytes); das ist einer der Unterschiede zwischen Cookies und Die oben genannte Caching-Technologie und da HTTP zustandslos ist, muss der Server eine Identifikations--Zeichenfolge benötigen, um zu unterscheiden, ob die Anforderung vom selben Server stammt. Diese Aufgabe wird durch Cookies erledigt den Server und den Browser jedes Mal, um die Berechtigungen des Benutzers zu überprüfen.

Daher sind die Anwendungsszenarien von Application Cache unterschiedlich, sodass die Verwendung inkonsistent ist.

AnwendungscacheEinführung

Die Verwendung des Anwendungscaches erfordert zwei Aspekte der Arbeit:

① Der Server muss eine Manifestliste verwalten

② Es ist nur eine einfache Einstellung im Browser erforderlich

<html  manifest="demo.appcache">

Abbildung mit einem Beispiel:

CACHE MANIFEST
CACHE:
# 需要缓存的列表
style1.css
1.jpg
01.js
http://localhost/applicationcache/02.js
http://localhost/applicationcache/zepto.js
NETWORK:
# 不需要缓存的
4.jpg
FALLBACK:
# 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html
2.jpg/3.jpg

Zuerst Alles, was ich hier über einen Fehler gemeldet habe:

 Application Cache Error event: Manifest fetch failed (404)

Der Grund für diesen Fehler ist: Die Manifestdatei muss mit dem richtigen MIME-Typ konfiguriert werden, d. h. „text/cache-manifest“. Es muss auf dem Webserver konfiguriert werden, verschiedene Server sind 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 kann es offline angewendet werden, auch wenn die Netzwerkverbindung zu diesem Zeitpunkt getrennt ist , diese Dateien sind immer noch da Kann auf

zugreifen. Eine erwähnenswerte Sache ist, dass, wenn /index.html hier nicht enthalten ist, tatsächlich „applicationcache/“ zwischengespeichert wird , das ist index.html

Die Manifestdatei kann in drei Teile unterteilt werden:

CACHE MANIFEST – die unter dieser Überschrift aufgeführten Dateien werden nach dem ersten Download zwischengespeichert

NETZWERK – Die unter dieser Überschrift aufgeführten Dateien müssen eine Verbindung zum Server herstellen, die nicht zwischengespeichert wird

FALLBACK – Die unter dieser Überschrift aufgeführten Dateien geben die Fallback-Seite an, wenn die Seite nicht erreichbar ist (z. B. eine 404-Seite)

Wie im Bild gezeigt, definiert HTML5 mehrere Ereignispunkte, aber wir verwenden js im Allgemeinen nicht aktiv, um etwas zu betreiben. In den meisten Fällen verlassen wir uns vollständig darauf über die Verarbeitung durch den Browser.

Größenbeschränkung

Die Größenbeschränkung des Anwendungscaches ist einheitlich bei 5 MB. Ich werde hier einen Test durchführen:

Wie gezeigt, überschreiten die beiden CSS-Dateien zu diesem Zeitpunkt immer noch 5 MB

Document was loaded from Application Cache with manifest http://localhost/applicationcache/demo.appcache
index.html:1 Application Cache Checking event
index.html:6 GET http://localhost/applicationcache/style2.css net::ERR_FAILED
index.html:1 Application Cache NoUpdate event
index.html:11 GET http://localhost/applicationcache/2.jpg net::ERR_FAILED
index.html:12 GET http://localhost/applicationcache/3.jpg net::ERR_FAILED

Wie gezeigt, kann Stil2 nicht mehr zwischengespeichert werden. Welches Problem wird dadurch verursacht?

Kanal A verwaltet beispielsweise seinen eigenen Anwendungscache und Kanal B verwaltet auch seinen eigenen. Wenn die Nutzung von Kanal A zu diesem Zeitpunkt ihren Höhepunkt erreicht, werden alle Caches von Kanal B ungültig, also:

Es wird empfohlen, dass der Anwendungscache öffentliche Ressourcen anstelle von Geschäftsressourcen speichert

Einige Probleme

由更新机制来说，首次更新manifest时，因为页面加载已经开始甚至已经完成，缓存更新尚未完成，浏览器仍然会使用过期的资源；浏览器是当Application Cache有更新时，该次不会使用新资源，第二次才会使用。这个时候update事件中执行window.reload事件。

window.applicationCache.addEventListener("updateready", function(){
    window.location.reload()
});

由上例可以知道，缓存的不只是显示定义的文件，比如上例中的applicationcache/时便会默认保存index.html为映射的数据，并且包含demo.appcache文件，很多时候会遇到一次文件更新线上老是不更新，这个时候随便在manifest配置文件中做一点修改即可更新。

比如我们将这里代码做一个改变：

<html  manifest="demo.appcache">
=>

这个时候如果不做demo.appcache的更新的话，缓存将不会更新，原因是index.html被缓存了，检测的仍然是原manifest清单

各个页面统一管理自己的manifest清单，意思是a页面配置了common.js，b页面也配置了common.js，意思是a页面更新后，b页面的manifest不更改的话，b页面依旧读取的是老版本的文件，这个有一定道理却也有一定浪费，需要公共页面做处理。

总结

从可用性与易用性来说，Application Cache是值得使用的，但是最好是做静态资源的缓存，真正要实现离线应用还得花更多的功夫呢！

Das obige ist der detaillierte Inhalt vonWas ist Anwendungscache?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Detaillierte Erläuterung des Kopfes von HTML5Nächster Artikel：Detaillierte Erläuterung des Kopfes von HTML5

In Verbindung stehende Artikel

Mehr sehen