Browser cache - Memory cache - Disk cache

16 mai 2017 / Marouen Mhiri / General

Durant le développement d'une application ou d'un site web, on se fait toujours des soucis concernant la performance de notre projet. Un des points les plus intéressants est le caching des ressources. Mais il n'y a pas un seul cache.

Pour être plus clair, dans cet article on ne va pas parler du cache du serveur mais plutôt du cache du "navigateur/Browser". On parle généralment du "browser cache", reconnue par le request state 304, qui signifie que la ressource en question ne sera pas téléchargée du serveur mais directement du cache! Mais c'est quoi au fait ce browser cache?

on distinge trois types de cache:
✓ Disk cache
✓ Memory cache et
✓ Browser cache.

➤ Disk cache

Le Disk cache est une mémoire RAM, qui contient une copie de l'information sur le disque. En règle générale, lorsque vous accédez à quelque chose sur le lecteur, la page entière est mise en cache, en supposant que l'accès suivant sera dans cette page. La première tentative de disque peut prendre 8 ms, alors que la recherche de cache 100 ns (plusieurs fois plus rapide - note nanosecondes au lieu de millisecondes)

disk cache

➤ Memory cache

Le Memory cache est le même concept, mais le cache est situé sur la puce CPU. Ainsi, l'accès à la mémoire d'origine est de 100ns, l'accès au cache L1 peut être de 0,5 ns.

disk cache

➤ Browser cache

Le Browser cache est similaire, mais stocke des ressources comme des images, des fichiers javascript, etc. sur votre disque dur au lieu de la page Web. Une fois que vous accédez à un site Web, ces ressources statiques sont stockées localement dans le cache du navigateur pour un accès plus rapide la deuxième fois que vous en avez besoin. En utilisant les données du lien ci-dessus, votre accès à une image sur le Web peut prendre 150 ms initialement, mais la deuxième fois seulement 8 ms.

disk cache

Note

Les implémentations de cache de mémoire et de disque essayent de deviner ce que l'utilisateur utilisera comme ressources, tandis que les caches de navigateur conservent une copie locale sur le disque dur au cas où la ressource en question sera demandée à nouveau.


Il y'a aussi autres methodes pour sauver des ressources dans un cache comme par exemple : utiliser le service worker pour cacher quelques images, fichiers css et js.

disk cache

J'éspère avec cet article avoir pu éclaircir la différence entre les différents types de caches.

Tags :

cache