Cache de memória do Chrome vs cache de disco


96

Estou interessado no cache de memória do Chrome vs cache de disco? Eu uso o webpack, plugin de pedaços comuns e gerei todos os meus arquivos com chunkhash.

Como a memória difere do cache de disco. Quando recarrego minha página, alguns arquivos são carregados do cache de memória e outros do cache de disco (bundle.js e image.jpg do cache de memória e css do cache de disco). Às vezes é diferente. Podemos controlar isso, escolher o que é carregado de onde? O cache de memória parece ser mais rápido que o cache de disco.


1
Olá Igor, Isso causou problemas de carregamento com o webpack? Como você resolveu isso?
Rejoy

1
Não houve problemas. Esta é apenas uma funcionalidade de cache do navegador que armazena arquivos do pacote da webpack.
Igor-Vuk

Oi Igor, vejo que isso é um problema quando alguns arquivos agrupados são carregados do disco e alguns da memória. Ele lança um erro JSONP, quando isso acontece. Isso acontece apenas em casos raros.
Rejoy

Respostas:


75

Como seus nomes diziam:

"Memory Cache" armazena e carrega recursos de e para a memória (RAM). Então, isso é muito mais rápido, mas não é persistente. O conteúdo está disponível até você fechar o navegador.

"Cache de disco" é persistente. Os recursos em cache são armazenados e carregados de e para o disco.

Teste simples: abra as ferramentas / rede do desenvolvedor do Chrome. Recarregue uma página várias vezes. A coluna da tabela "Tamanho" informará que alguns arquivos são carregados "do cache de memória". Agora feche o navegador, abra Developper Tools / Network novamente e carregue a página novamente. Todos os arquivos em cache são carregados "do cache de disco" agora, porque o cache de memória está vazio.


4
Bem, eu não sabia que era tão simples.
Faizan Anwer Ali Rupani

27
como o navegador determina quais ativos armazenar no cache de memória versus cache de disco?
chharvey

10
podemos configurar o que deve ser armazenado em cache no cache de memória?
Igor-Vuk

1
Eu tenho alguns itens em meu aplicativo angular que são carregados do disco quando eu o executo localmente, na produção esses arquivos não são armazenados em cache. Apenas o cache da memória funciona no ambiente de produção. Vocês sabem o que pode causar isso?
Rafael Andrade

@RafaelAndrade Lembre-se de que o angular fornece vários ambientes (em src / environment / *. Ts). environment.prod.ts define seu ambiente de construção produtiva, em que environment.ts define seu ambiente de desenvolvimento local. No ambiente de desenvolvimento local, você geralmente não deseja arquivos em cache para que as alterações locais sempre se apliquem ao seu aplicativo.
Ruwen

14

O Chrome implementa caches em muitos níveis de abstração. No núcleo está o cache HTTP (navegador) - um backend para outros mecanismos de cache. Geralmente os caches podem ser divididos em:

  • Cache HTTP
  • Caches de Service Worker
  • Blink cache

Cache HTTP

Cada solicitação feita pela rede é intermediada pelo cache HTTP aderindo ao RFC . Quando solicitado pela primeira vez, o cache é sobrescrito. Os recursos são codificados pelo url de origem.

Cache do Service Worker

Para lidar normalmente com falhas de conexão de rede, você pode usar Service Workers . Os caches e o armazenamento em cache seriam retirados do disco novamente.

Blink Cache

O Blink usa Http Cache como backend em dois modos de criação - na memória e simples (sistema de arquivos). Qual é usado depende do limite definido globalmente para caches de quanta memória eles podem ocupar. Além disso, o cache do renderizador atual obtém o maior compartilhamento. O que é armazenado em cache são fontes, imagens e scripts. Se o uso de memória global atingir algum limite especificado, o backend do sistema de arquivos será usado.

Forçando no cache de memória

Se quiser que seus arquivos sejam servidos pelo mecanismo padrão de substituição de memória, você pode implementar seu próprio Service Worker. Usando Arquivo Api, os recursos podem ser lidos e armazenados no objeto na memória. Então, substituir o evento fetch suprimiria as leituras de rede e de arquivo com o conteúdo fornecido a partir deste objeto global.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.