HTML5 presenta la tecnología de caché de aplicaciones, lo que significa que las aplicaciones web se pueden almacenar en caché y se usan sin una red creando el archivo manifiesto de caché, puede crear fácilmente aplicaciones fuera de línea.
Las tres ventajas presentadas por la caché de la aplicación son:
① Examinar fuera de línea
② Aumente la velocidad del ingreso facial de la página
③ Reducir la presión del servidor
Y el navegador principal es compatible con el soporte de la caché de la aplicación.
Tecnología de almacenamiento fuera de líneaHTML5 propone dos principales tecnologías de almacenamiento fuera de línea: el almacenamiento local y la memoria caché de la aplicación, cada una con sus propios escenarios de aplicación;
Después de la práctica, creemos que LocalStorage debería almacenar algunos datos de Ajax no críticos y hacer el pastel;
La caché de aplicaciones todavía se usa para almacenar recursos estáticos, y todavía se trata de glaseado seco;
Y las cookies solo pueden guardar un pequeño párrafo (4096 bytes) para que no pueda almacenar grandes datos. hecho por cookies.
Por lo tanto, el escenario de aplicación del caché de la aplicación es diferente, por lo que el uso no es consistente.
Introducción a la memoria caché de la aplicaciónLa caché de la aplicación utiliza dos aspectos:
① El servidor necesita mantener una lista de manifiesto
② Solo hay una configuración simple en el navegador
<html manifest = demo.appcache>
Para explicar el ejemplo:
Cache ManifestCache:# The list of cache style1.css1.jpg01.jshttp: //localHost/applicationCache/02.jshttp: //localhost/Application/zepto.jsNetw Ork:# 4.jpgFallback:# After the access cache fails , The Recurso de acceso de repuesto, el primero es la fuente de acceso, la segunda es reemplazar el archivo*.html /offline.html2.jpg/3.jpg
En primer lugar, informé un error aquí:
Evento de error de caché de la aplicación: fallado de la búsqueda de manifiestas (404)
La razón de este error es que el archivo manifiesto debe configurar el tipo MIME correcto, es decir, Text/Cache-manifest. Debe configurarse en el servidor web, diferentes servidores son diferentes
/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 esta manera, puede aplicarlo fuera de línea.
Vale la pena señalar aquí.
Los archivos de manifiesto se pueden dividir en tres partes:
Cache Manifest: el archivo que figura en este título se almacenará en caché después de la primera descarga
Red: los archivos enumerados en este título deben conectarse al servidor sin ser almacenado en caché
Fallback -Los archivos enumerados en este título estipulan que las páginas de las páginas de retirada cuando no se puede acceder a la página (como la página 404)
Como se muestra en la figura, HTML5 define varios puntos de eventos, pero generalmente no usamos activamente JS para operar algo.
DimensiónEl límite de tamaño del caché de la aplicación se unifica a 5 m, hago una prueba aquí:
Como se muestra, los dos archivos CSS aún exceden los 5 m en este momento
El documento se cargó desde la memoria caché de la aplicación con Http Manifest: //localhost/applicationcache/demo.appcacheindex.html: 1 Caché de la aplicación Comprobación dex.html: 6 get http: //localhost/applicationcache/style2.css net :: err_fairdindex.html: 1 Aplicación Cache Noupdate eventIndex.html: 11 Get http: //localhost/applicationcache/2.jpg net :: err_fairdindex.html: 12 getp: // localhost/apliccache/3.jpg net :: err_faird
Como se muestra, Style2 ya no puede almacenar en caché, ¿qué problemas causará esto?
Por ejemplo, el canal A mantiene su propio caché de aplicaciones, y el canal B también se mantiene a sí mismo.
Se recomienda que el caché de aplicaciones, almacene recursos públicos, no almacene recursos comerciales
Algunos problemasDesde la perspectiva del mecanismo de actualización, cuando se actualiza el manifiesto por primera vez, porque la carga de la página ha comenzado o incluso completada, la actualización de la memoria caché no se completa y el navegador aún usará recursos caducados; se actualiza. En este momento, el evento Windows.Reload se ejecutó en el evento de actualización.
Window.ApplicationCache.adDeventListener (updateReady, function () {window.location.reload ()});Del ejemplo anterior, se puede saber que el caché no es solo el archivo de definición, como la aplicación/tiempo de aplicación en el ejemplo anterior, los datos de index.html como la asignación se guarda de forma predeterminada, y contiene la demostración. APPCACHE FILE.
Por ejemplo, hacemos un cambio aquí:
<html manifest = demo.appcache> => <html manifest = demo1.appcache>
En este momento, si no realiza actualizaciones de Demo.AppCache, el caché no se actualizará porque index.html está en caché, y la detección sigue siendo la lista de manifiesto original
Cada página administra uniformemente su propia lista de manifiesto, lo que significa que la página A está configurada con Common.js, y la página B también está configurada con Common.js, lo que significa que después de actualizar la página, si el manifiesto en la página B No se cambiará, la página B todavía se lee.
ResumirEn términos de disponibilidad y facilidad de uso, vale la pena usar el caché de la aplicación, pero es mejor almacenar en caché para los recursos estáticos.