Cache d'application HTML5

Auteur：Eve Cole Date de mise à jour：2025-02-07 08:24:02

Qu'est-ce que le cache d'application

HTML5 introduit la technologie du cache d'application, ce qui signifie que les applications Web peuvent être mises en cache et utilisées sans réseau.

Les trois avantages apportés par le cache d'application sont:

① Procédure hors ligne

② Augmenter la vitesse du revenu facial de la page

③ Réduire la pression du serveur

Et le navigateur principal est pris en charge en prenant en charge le cache d'application.

Technologie de stockage hors ligne

HTML5 propose deux principales technologies de stockage hors ligne: le cache localstorage et l'application, chacun avec ses propres scénarios d'application; la technologie de stockage traditionnelle et hors ligne est un cookie.

Après l'entraînement, nous pensons que LocalStorage devrait stocker des données AJAX non critiques et faire le gâteau;

Le cache d'application est toujours utilisé pour stocker des ressources statiques, et il s'agit toujours de glaçage sec;

Et les cookies peuvent seulement sauver un petit texte de paragraphe (4096 octets); fait par des cookies.

Par conséquent, le scénario d'application du cache d'application est différent, donc l'utilisation n'est pas cohérente.

Introduction du cache d'application

Le cache d'application utilise deux aspects:

① Le serveur doit maintenir une liste manifeste

② Il n'y a qu'un seul paramètre simple sur le navigateur

 <html manifeste = demo.appcache>

Pour expliquer l'exemple:

 Cache ManifestCache: # La liste du style de cache1.css1.jpg01.jshttp: //localhost/applicationcache/02.jshttp: //localhost/application/zepto.jsnetw ork: # 4.jpgfallback: # Après les défaillances du cache d'accès, le CACE FAILS, le CACH Ressource de l'accès à la rechange, la première est la source d'accès, la seconde consiste à remplacer le fichier * .html /offline.html2.jpg/3.jpg

Tout d'abord, j'ai signalé une erreur ici:

 Événement d'erreur de cache d'application: manifeste Fetch a échoué (404)

La raison de cette erreur est que le fichier manifeste doit configurer le bon type MIME, c'est-à-dire Text / Cache-Manifest. Doit être configuré sur le serveur Web, différents serveurs sont différents

 / 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

De cette façon, vous pouvez l'appliquer hors ligne.

Il convient de noter ici.

Les fichiers manifestes peuvent être divisés en trois parties:

Cache Manifest - Le fichier répertorié sur ce titre se cachera après le premier téléchargement

Réseau - Les fichiers répertoriés dans ce titre doivent être connectés au serveur sans être mis en cache

Fallback -Les fichiers répertoriés sur ce titre stipulent que les pages des pages de retraite lorsque la page ne peut pas être accessible (comme la page 404)

Comme le montre la figure, HTML5 définit plusieurs points d'événement, mais nous n'utilisons généralement pas activement JS pour faire fonctionner quelque chose.

Dimension

La limite de taille du cache d'application est unifiée à 5m, je fais un test ici:

Comme indiqué, les deux fichiers CSS dépassent toujours 5 m pour le moment

 Le document a été chargé à partir du cache d'application avec manifeste http: //localhost/applicationcache/demo.appcacheIndex.html: 1 Cache d'application Vérification dex.html: 6 Get http: //localhost/applicationcache/style2.css net :: err_fairdindex.html: 1 application cache noupdate eventindex.html: 11 get http: //localhost/applicationcache/2.jpg net :: err_fairdindex.html: 12 getp: // localhost / appl icationcache / 3.jpg net :: err_fairddd

Comme indiqué, Style2 ne peut plus se cacher, quels problèmes cela causera-t-il?

Par exemple, le canal A maintient son propre cache d'application et le canal B se maintient également.

Il est recommandé de mettre en cache d'application, de stocker les ressources publiques, de ne pas stocker les ressources commerciales

Quelques problèmes

Du point de vue du mécanisme de mise à jour, lors de la mise à jour du manifeste pour la première fois, car le chargement de la page a commencé ou même terminé, la mise à jour du cache n'est pas terminée et le navigateur utilisera toujours des ressources expirées; est mis à jour. À ce moment, l'événement Window.reload a été exécuté dans l'événement de mise à jour.

 Window.ApplicationCache.AddeventListener (UpdateAy, fonction () {Window.Location.Reload ()});

D'après l'exemple ci-dessus, on peut savoir que le cache n'est pas seulement le fichier de définition, tel que l'applicationCache / Time dans l'exemple ci-dessus, les données d'Index.html au fur et à mesure que le mappage est enregistrée par défaut, et il contient la démo. Fichier AppCache.

Par exemple, nous faisons un changement ici:

 <html manifest = Demo.appcache> => <html manifest = Demo1.appcache>

À l'heure

Chaque page gére uniformément sa propre liste de manifestes, ce qui signifie que la page A est configurée avec Common.js, et la page B est également configurée avec Common.js, ce qui signifie qu'après la mise à jour de la page, si le manifeste sur la page B B ne sera pas modifié, la page B est toujours lue.

Résumer

En termes de disponibilité et de facilité d'utilisation, le cache d'application mérite d'être utilisé, mais il est préférable de se mettre en cache pour les ressources statiques.