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.
Was ist Anwendungscache?
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.jsAuf 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!
HTML5: Der Standard und seine Auswirkungen auf die WebentwicklungApr 27, 2025 am 12:12 AMDie Kernmerkmale von HTML5 sind semantische Tags, Multimedia -Support, Offline -Speicher und lokaler Speicher sowie Form. 1. Semantische Tags wie usw., um die Code -Lesbarkeit und SEO -Effekt zu verbessern. 2. Vereinfachen Sie die Multimedia -Einbettung mit Etiketten. 3. Offline-Speicher und lokaler Speicher wie ApplicationCache und LocalStorage unterstützen den netzwerkfreien Betrieb und die Datenspeicherung. 4. Formularverbesserung führt neue Eingangstypen und Überprüfungseigenschaften ein, um die Verarbeitung und Überprüfung zu vereinfachen.
Beispiele für H5 -Code: Praktische Anwendungen und TutorialsApr 25, 2025 am 12:10 AMH5 bietet eine Vielzahl neuer Funktionen und Funktionen und verbessert die Fähigkeiten der Front-End-Entwicklung erheblich. 1. Multimedia-Unterstützung: Einbetten von Medien und Elementen, keine Plug-Ins sind erforderlich. 2. Leinwand: Verwenden Sie Elemente, um 2D -Grafiken und -Animationen dynamisch zu rendern. 3. Lokaler Speicher: Implementieren Sie die persistente Datenspeicherung über LocalStorage und SessionStorage, um die Benutzererfahrung zu verbessern.
Die Verbindung zwischen H5 und HTML5: Ähnlichkeiten und UnterschiedeApr 24, 2025 am 12:01 AMH5 und HTML5 sind verschiedene Konzepte: HTML5 ist eine Version von HTML, die neue Elemente und APIs enthält. H5 ist ein Rahmen für mobile Anwendungsentwicklungen, die auf HTML5 basieren. HTML5 pariert und rendert Code über den Browser, während H5 -Anwendungen Container ausführen und über JavaScript mit nativem Code interagieren müssen.
Die Bausteine des H5 -Codes: Schlüsselelemente und deren ZweckApr 23, 2025 am 12:09 AMZu den wichtigsten Elementen von HTML5 gehören ,,,,,, usw., mit denen moderne Webseiten erstellt werden. 1. Definieren Sie den Kopfinhalt, 2. Zum Navigieren durch den Link, 3. darstellen den Inhalt unabhängiger Artikel, 4. organisieren Sie den Seiteninhalt, 5. Zeigen Sie den Seitenleisteninhalt an, 6. Definieren Sie die Fußzeile. Diese Elemente verbessern die Struktur und Funktionalität der Webseite.
HTML5 und H5: Verständnis der gemeinsamen VerwendungApr 22, 2025 am 12:01 AMEs gibt keinen Unterschied zwischen HTML5 und H5, der Abkürzung von HTML5. 1.HTML5 ist die fünfte Version von HTML, die die Multimedia- und interaktiven Funktionen von Webseiten verbessert. 2.H5 wird häufig verwendet, um auf HTML5-basierte mobile Webseiten oder -anwendungen zu verweisen, und eignet sich für verschiedene mobile Geräte.
HTML5: Die Bausteine des modernen Webs (H5)Apr 21, 2025 am 12:05 AMHTML5 ist die neueste Version der Hypertext -Markup -Sprache, die von W3C standardisiert wurde. HTML5 führt neue semantische Tags, Multimedia -Support- und Form -Verbesserungen ein, verbessert die Webstruktur, die Benutzererfahrung und die SEO -Effekte. HTML5 führt neue semantische Tags vor, wie z. HTML5 unterstützt Multimedia-Elemente und es sind keine Plug-Ins von Drittanbietern erforderlich, wodurch die Benutzererfahrung und die Ladegeschwindigkeit verbessert werden. HTML5 verbessert die Formfunktionen und führt neue Eingangstypen wie usw. ein, die die Effizienz der Benutzererfahrung und der Form von Formularverifizierung verbessert.
H5 -Code: Sauberes und effizientes HTML5 schreibenApr 20, 2025 am 12:06 AMWie schreibe ich sauberen und effizienten HTML5 -Code? Die Antwort besteht darin, häufige Fehler zu vermeiden, indem Tags, strukturierte Code, Leistungsoptimierung und die Vermeidung häufiger Fehler vermieden werden. 1. Verwenden Sie semantische Tags wie usw., um die Code -Lesbarkeit und SEO -Effekt zu verbessern. 2. Halten Sie den Code strukturiert und lesbar, wobei entsprechende Eindrücke und Kommentare verwendet werden. 3. Optimieren Sie die Leistung, indem Sie unnötige Tags reduzieren, CDN- und Komprimierungscode. V.
H5: Wie es die Benutzererfahrung im Web verbessertApr 19, 2025 am 12:08 AMH5 verbessert die Erfahrung des Webbenutzers mit Multimedia -Support, Offline -Speicher und Leistungsoptimierung. 1) Multimedia -Unterstützung: H5 und Elemente vereinfachen die Entwicklung und verbessern die Benutzererfahrung. 2) Offline -Speicher: Webstorage und IndexedDB ermöglichen die Verstärkung der Erfahrung offline. 3) Leistungsoptimierung: Webworker und Elemente optimieren die Leistung, um den Bandbreitenverbrauch zu verringern.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Dreamweaver Mac
Visuelle Webentwicklungstools
SecLists
SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.
mPDF
mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),
SublimeText3 Englische Version
Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!
VSCode Windows 64-Bit-Download
Ein kostenloser und leistungsstarker IDE-Editor von Microsoft
