Cache mémoire Chrome vs cache disque

96

Je suis intéressé par le cache mémoire Chrome vs le cache disque? J'utilise webpack, plugin de blocs communs et génère tous mes fichiers avec chunkhash.

En quoi la mémoire diffère-t-elle du cache disque. Lorsque je recharge ma page, certains fichiers sont chargés depuis le cache mémoire et certains depuis le cache disque (bundle.js et image.jpg depuis le cache mémoire et css depuis le cache disque). Parfois c'est différent. Pouvons-nous contrôler cela, choisir ce qui est chargé d'où? Le cache mémoire semble être plus rapide que le cache disque.

google-chrome caching webpack Igor-Vuk
la source
1
Salut Igor, Cela a-t-il causé des problèmes de chargement avec Webpack? Comment avez-vous résolu cela?
Rejoy
1
Il n'y a eu aucun problème. Il s'agit simplement d'une fonctionnalité de cache du navigateur qui mettait en cache les fichiers de bundle Webpack.
Igor-Vuk
Salut Igor, je vois que cela pose un problème lorsque certains fichiers groupés sont chargés à partir du disque et d'autres à partir de la mémoire. Il génère une erreur JSONP, lorsque cela se produit. Cela ne se produit que dans de rares cas.
Rejoy
se / SuperUser
chharvey

Réponses:

75

Comme leurs noms l'ont dit:

«Memory Cache» stocke et charge les ressources vers et depuis la mémoire (RAM). C'est donc beaucoup plus rapide mais ce n'est pas persistant. Le contenu est disponible jusqu'à ce que vous fermiez le navigateur.

«Disk Cache» est persistant. Les ressources mises en cache sont stockées et chargées vers et depuis le disque.

Test simple: ouvrez Chrome Developper Tools / Network. Recharger une page plusieurs fois. La colonne du tableau "Taille" vous indiquera que certains fichiers sont chargés "à partir du cache mémoire". Fermez maintenant le navigateur, ouvrez à nouveau Developper Tools / Network et chargez à nouveau cette page. Tous les fichiers mis en cache sont maintenant chargés "à partir du cache disque", car votre cache mémoire est vide.

Ruwen
la source
4
Eh bien, je ne savais pas que c'était aussi simple.
Faizan Anwer Ali Rupani
27
Comment le navigateur détermine-t-il les actifs à stocker dans le cache mémoire par rapport au cache disque?
chharvey
10
pouvons-nous configurer ce qui doit être mis en cache dans le cache mémoire?
Igor-Vuk
1
J'ai des itens sur mon application angulaire qui sont chargés à partir du disque lorsque je l'exécute localement, en production, ces fichiers ne sont pas du tout mis en cache. Seul le cache de la mémoire fonctionne sur l'environnement de production. Vous savez ce qui pourrait en être la cause?
Rafael Andrade
@RafaelAndrade Gardez à l'esprit que angular fournit plusieurs environnements (dans src / environnements / *. Ts). environment.prod.ts définit votre environnement de build productiv où environment.ts définit votre environnement de développement local. Dans les environnements de développement local, vous ne voulez surtout pas de fichiers mis en cache afin que vos modifications locales s'appliquent toujours à votre application.
Ruwen
14

Chrome implémente des caches à de nombreux niveaux d'abstraction. Au cœur se trouve le cache HTTP (navigateur) - un backend pour d'autres mécanismes de mise en cache. En général, les caches peuvent être divisés en:

  • Cache HTTP
  • Caches de Service Worker
  • Cache de clignotement

Cache HTTP

Chaque demande qui est faite sur le réseau est mandatée par HTTP Cache adhérant à RFC . Lorsqu'il est demandé pour la première fois, le cache est écrasé. Les ressources sont identifiées par l'URL d'origine.

Cache de l'agent de service

Pour gérer correctement les échecs de connexion réseau, vous pouvez utiliser Service Workers . Les caches et le stockage du cache seraient à nouveau extraits du disque.

Cache clignotant

Blink utilise Http Cache comme backend dans deux modes de création - en mémoire et simple (système de fichiers). Celui qui est utilisé dépend de la limite définie globalement pour les caches de la quantité de mémoire qu'ils peuvent prendre. Le cache du moteur de rendu actuel est également le plus partagé. Ce qui est mis en cache, ce sont les polices, les images et les scripts. Si l'utilisation globale de la mémoire atteint un certain seuil spécifié, le backend du système de fichiers est utilisé.

Forçage dans le cache mémoire

Si vous souhaitez que vos fichiers soient servis à partir du mécanisme par défaut de remplacement de la mémoire, vous pouvez implémenter votre propre Service Worker. En utilisant File Api, les ressources peuvent être lues et stockées dans un objet en mémoire. Ensuite, le remplacement de l'événement fetch supprimerait les lectures de réseau et de fichier avec le contenu servi à partir de cet objet global.

Dominik G
la source