O HTML5 apresenta a tecnologia de cache de aplicativos, o que significa que os aplicativos da Web podem ser armazenados em cache e usados sem uma rede.
As três vantagens trazidas pelo cache do aplicativo são:
① Navegue offline
② Aumente a velocidade de renda facial da página
③ Reduza a pressão do servidor
E o navegador principal é suportado pela suporte ao cache do aplicativo.
Tecnologia de armazenamento offlineO HTML5 propõe duas principais tecnologias de armazenamento offline: o cache do localStorage e do aplicativo, cada um com seus próprios cenários de aplicativos;
Após a prática, acreditamos que o LocalSorage deve armazenar alguns dados não críticos do Ajax e fazer o bolo;
O cache do aplicativo ainda é usado para armazenar recursos estáticos e ainda é uma questão de gelo seco;
E os cookies podem salvar apenas um pequeno parágrafo (4096 bytes); Feito por cookies.
Portanto, o cenário de aplicação do cache do aplicativo é diferente; portanto, o uso não é consistente.
Introdução ao cache do aplicativoCache do aplicativo usa dois aspectos:
① O servidor precisa manter uma lista de manifesto
② Existe apenas uma configuração simples no navegador
<html manifesto = Demo.appcache>
Para explicar o exemplo:
Cache manifestcache:# a lista de cache style1.css1.jpg01.jshttp: //localhost/applicationcache/02.jshttp: //localhost/application/zepto.jsnet Ork:# 4.jpfallback:# após o acesso a falhas Recurso do acesso sobressalente, o primeiro é a fonte de acesso, o segundo é substituir o arquivo*.html /offline.html2.jpg/3.jpg
Primeiro de tudo, relatei um erro aqui:
Evento de erro de cache do aplicativo: Falha no manifesto falhado (404)
A razão para esse erro é que o arquivo de manifesto precisa configurar o tipo MIME correto, ou seja, texto/manifesto de cache. Deve ser configurado no servidor da web, diferentes servidores são 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
Dessa forma, você pode aplicá -lo offline.
Vale a pena notar aqui.
Os arquivos de manifesto podem ser divididos em três partes:
Manifesto de cache -o arquivo listado neste título cache após o primeiro download
Rede -Os arquivos listados neste título precisam ser conectados ao servidor sem ser armazenado em cache
Fallback -Os arquivos listados neste título estipulam que as páginas das páginas de retirada quando a página não pode ser acessada (como a página 404)
Como mostrado na figura, o HTML5 define vários pontos de evento, mas geralmente não usamos ativamente o JS para operar algo.
DimensãoO limite de tamanho do cache do aplicativo é unificado em 5m, faço um teste aqui:
Como mostrado, os dois arquivos CSS ainda excedem 5m neste momento
O documento foi carregado do cache do aplicativo com manifesto http: //localhost/applicationcache/demo.appcacheindex.html: 1 cache de aplicativo Verificando dex.html: 6 Get http: //localhost/ApplicationCache/style2.css net: errr_aird: //localhos 1 cache de aplicativo noupdate EventIndex.html: 11 Obtenha http: //localhost/applicationcache/2.jpg net :: err_fairdindex.html: 12 getp: // lochost/appscache/3.jpg net :: err_faird
Como mostrado, o Style2 não pode mais armazenar em cache, que problemas isso causará?
Por exemplo, o canal A mantém seu próprio cache de aplicativos e o canal B também se mantém.
Recomenda -se que o cache do aplicativo, armazene recursos públicos, não armazene recursos de negócios
Alguns problemasDo ponto de vista do mecanismo de atualização, quando atualizado o manifesto pela primeira vez, porque o carregamento da página começou ou mesmo concluído, a atualização do cache não é concluída e o navegador ainda usará os recursos expirados; é atualizado. No momento, o evento Window.reload foi executado no evento de atualização.
Window.ApplicationCache.adDeventListener (UpdateArty, function () {window.Location.Reload ()});A partir do exemplo acima, pode -se saber que o cache não é apenas o arquivo de definição, como o ApplicationCache/Time no exemplo acima, os dados do index.html como o mapeamento é salvo por padrão e contém a demonstração. Arquivo AppCache. Em muitos casos, ele encontrará uma atualização de arquivo.
Por exemplo, fazemos uma mudança aqui:
<html manifesto = Demo.appcache> => <html manifesto = Demo1.appcache>
No momento, se você não fizer Demo.AppCache Atualizações, o cache não será atualizado porque o index.html está em cache e a detecção ainda é a lista de manifesto original
Cada página gerencia uniformemente sua própria lista de manifesto, o que significa que a página A está configurada com Common.js, e a página B também é configurada com Common.js, o que significa que após a página for atualizado, se o manifesto na página B Não será alterado, a página B ainda é lida.
ResumirEm termos de disponibilidade e facilidade de uso, vale a pena usar o cache do aplicativo, mas é melhor armazenar em cache para recursos estáticos.