La mise en cache Web comme exemple d'achat de lait dans un magasin

Si vous avez acheté du lait au magasin, vous pouvez comprendre comment fonctionne la mise en cache côté serveur et côté navigateur.

Si vous êtes un utilisateur Internet actif (et c'est très probablement le cas), vous utilisez constamment la mise en cache, mais vous ne connaissez peut-être pas les «coulisses»: quand et comment cela fonctionne.

Du point de vue d'un développeur, la mise en cache facilite la création d'applications Web et de serveurs Web hautes performances: vous n'avez pas besoin d'optimiser constamment les serveurs surchargés de milliers de demandes - vous implémentez simplement des protocoles de mise en cache et la vie devient beaucoup plus facile.

Lors de la mise en cache, le temps de chargement des pages passe de 2 secondes à 1 seconde ... ce qui n'est pas très impressionnant, non? Mais vous ne pouvez pas vous en passer lorsque vous devez traiter les demandes d'un grand nombre d'utilisateurs.

En utilisant la mise en cache dans l'une de mes applications Web, j'ai réalisé que le simple fait de parcourir les termes n'est pas la meilleure façon d'expliquer cette approche. Il m'est venu à l'esprit qu'une bonne analogie serait le chemin du lait de la ferme au réfrigérateur.

Pour comprendre mon explication, vous devez en savoir un peu sur les bases du fonctionnement des serveurs Web . Commençons!

Traduit en Alconost

À quoi ressemblerait Internet sans mise en cache?

Avant de passer à la mise en cache, réfléchissons à ce qu'Internet aurait sans lui. Imaginez un instant que vous vivez aux XVIIIe et XIXe siècles. à la campagne. Vous avez une ferme mais pas de réfrigérateur. Vous gardez plusieurs vaches, mais leur lait se gâte rapidement, et il est donc très difficile d'en tirer profit.

Soit dit en passant, dans certains endroits, les gens n'ont toujours pas de réfrigérateur: ils boivent du lait frais immédiatement, ou le mélangent avec du grain et le font fermenter - une approche intéressante, non?

En général, vous souhaitez vendre du lait à d'autres villageois. Mais ils devront le boire très rapidement. Supposons qu'une vache puisse produire dix litres de lait par jour. Cela signifie que si trop de gens viennent soudainement à la ferme pour obtenir du lait, vous devrez leur demander de revenir le lendemain.



Et ce n'est pas le cas lorsque vous pouvez simplement obtenir quelques vaches supplémentaires et vous développer, car vous avez une clientèle limitée: seuls les habitants d'un village achètent du lait. Il y a donc des limites assez certaines.



Sans mise en cache, la puissance de traitement des serveurs vous limite. La mise en cache est utilisée pour charger des ressources statiques telles que:

• des images
  
• CSS
  
• fichiers html statiques
  
• Fichiers JavaScript.
  

Par défaut, pour chaque demande entrante, le serveur doit envoyer une nouvelle réponse. Mais une demande de chargement de page peut en fait signifier quatre demandes distinctes - une pour chacune des catégories ci-dessus. Étant donné que les fichiers image sont généralement assez volumineux, un grand nombre d'utilisateurs du monde entier surchargeront facilement vos serveurs et le chargement des pages prendra plus de temps.



Idéalement, je voudrais réduire la charge sur les serveurs, en préservant en quelque sorte les réponses aux demandes courantes. Le serveur n'a pas à traiter chaque nouvelle demande distincte - la réponse sera reçue du cache. Bien sûr, vous pouvez toujours débourser et ajouter plus de serveurs, mais cela peut entraîner des augmentations de coûts incontrôlées.

Mise en cache côté serveur

Revenons à nos vaches. Savez-vous ce qui faciliterait le travail de notre ferme laitière?

Achetez avec un frigo!

Les résidents n'auront plus besoin de venir à la ferme et de boire immédiatement du lait, car il peut être stocké en toute sécurité pendant plusieurs semaines.

Le magasin retire la charge de la ferme: désormais les vaches n'ont plus besoin d'être dérangées pour chaque acheteur. Le magasin répond à la demande et vous n'avez qu'à traire vos vaches quotidiennement. Et un autre plus: les habitants des villages voisins pourront désormais acheter du lait conservé au réfrigérateur.





Le cache côté serveur , comme un magasin, traitera les demandes populaires et fournira le contenu beaucoup plus rapidement et de manière plus fiable.

L'image ci-dessus montre un serveur proxy de mise en cache : il stocke des fichiers statiques qui sont utilisés pour répondre aux demandes courantes. Ce serveur intercepte ces demandes et donne rapidement une réponse, ce qui vous permet de supprimer la charge correspondante des principaux serveurs Web.

À ce stade, vous avez peut-être déjà des questions:

1. Comment définir une requête «populaire»?
   
2. Combien de temps les réponses sont-elles stockées dans le cache proxy?
   

Pour expliquer cela, il faudra des indications plus détaillées sur la mise en place du cache, mais maintenant il est important d'être conscient d'un concept important - la fraîcheur. Il y aura différents fichiers sur le proxy de mise en cache, mis en cache à des moments différents, et il doit décider de toujours émettre ces fichiers. Cela dépendra de la politique de cache .

Ce qui ressemble aussi au stockage de lait dans un magasin. Le directeur du magasin doit décider de la durée du lait avant d'être jeté. Les proxys de mise en cache mesurent leurs performances par le pourcentage d' accès au cache - le pourcentage de contenu qui peut être fourni via le serveur de mise en cache.

Réseau de diffusion de contenu

Donc, nous avons une épicerie qui vend votre lait. Déjà pas mal, mais les résidents ne peuvent acheter du lait que dans un magasin local, et il est peu probable que quelqu'un vienne de loin. Pour augmenter la production, vous devez vendre du lait dans plus de magasins.

Ainsi, vous commencez à livrer du lait à d'autres magasins et ainsi à satisfaire la demande dans une région géographique beaucoup plus large. Ceci est similaire à un réseau de distribution de contenu (CDN) - des mandataires situés dans le monde entier (tels que ceux décrits ci-dessus).

En tant qu'utilisateur final, vous pourriez penser que l'Internet haut débit vous permet de charger la plupart des sites très rapidement. Cependant, cela est principalement possible grâce à l'utilisation de CDN pour la livraison rapide de fichiers statiques.

Si vous êtes en Angleterre et que vous essayez de télécharger un fichier mis en cache sur un serveur à Khabarovsk, la réponse viendra avec un certain retard: le signal prendra du temps pour parcourir des milliers de kilomètres de câbles. Par conséquent, un serveur proxy de mise en cache local au Royaume-Uni vous permettra de charger le site plus rapidement.





Ainsi, vos serveurs peuvent envoyer une copie des ressources statiques à chaque serveur proxy sur le CDN afin qu'ils traitent les requêtes locales jusqu'à ce que les ressources ne soient plus «fraîches». Les fournisseurs de services CDN populaires sont Rackspace, Akamai et Amazon Web Services.

Mise en cache côté navigateur

Ainsi, maintenant, des gens de tout le pays (et même du monde) peuvent ramener à la maison le lait froid produit dans votre ferme. Il y avait un problème: ils ne peuvent pas stocker le lait à la maison, donc après l'achat, vous devez le boire rapidement, et aller à nouveau au magasin pour une nouvelle portion. Il s'avère qu'un tel système n'est toujours pas très pratique pour les acheteurs.

Le réfrigérateur nous sauvera!

Ayant un réfrigérateur, vous pouvez stocker du lait à la maison et ne pas courir chaque fois au magasin. En termes de mise en cache, c'est un endroit complètement différent pour stocker des ressources statiques, car il est situé côté client (en d'autres termes, sur l'ordinateur où le navigateur s'exécute), et notre serveur proxy était dans un endroit distant.

Cette approche est non seulement pratique pour l'utilisateur dans le cas de sites fréquemment visités, tels que Facebook ou Amazon, mais permet également à ces sites d'économiser sur les coûts du serveur en raison du nombre réduit de demandes traitées.





Et ici, il est important de noter que le lait dans le réfrigérateur N'APPARAÎT PAS! Quoi qu'il en soit, vous devez effectuer la demande initiale, qui atteindra le serveur ou le serveur proxy, et seulement après cela, vous pouvez mettre en cache certains fichiers localement.

Comment le navigateur sait-il quand demander de nouveaux fichiers au serveur? Après tout, vous devez en quelque sorte mettre à jour les fichiers locaux.

Tout comme les producteurs de lait mettent des dates d'expiration sur l'emballage, les serveurs ajoutent un identifiant spécifique à l'en-tête de réponse HTTP. Il existe en fait quatre systèmes différents pour la mise en cache HTTP. Le scénario décrit ci-dessus est très similaire à la méthode d'expiration. Cependant, dans le cas de certaines autres méthodes, avant d'émettre le fichier mis en cache, une demande au serveur doit être envoyée.

Quand commencer à utiliser la mise en cache

Supposons que vous créez votre première application Web. Tant que vous n'avez pas des milliers d'utilisateurs, vous n'avez probablement pas à vous soucier des protocoles de mise en cache: le coût de fonctionnement d'un serveur sera suffisamment faible sans lui. Cependant, avec la croissance de la base d'utilisateurs, la mise en cache devra également être implémentée - si vous voulez que l'application se charge rapidement.

Prenez Heroku, par exemple, un excellent outil pour déployer votre première application Web. Cependant, pour implémenter la mise en cache, vous devrez utiliser un service distinct - par exemple, CloudFront d'Amazon ou CloudFlare - et cela prendra plus de temps pour l'apprendre.

Vous pouvez remarquer la mise en cache côté navigateur lorsque vous essayez de recharger la page et d'obtenir de nouvelles ressources statiques, mais la page ne change pas, quel que soit le nombre de fois que vous l'actualisez.

En règle générale, la raison en est le protocole de mise en cache côté navigateur. Pour contourner le cache du navigateur et demander de nouvelles ressources au serveur, vous pouvez appuyer sur Cmd + Shift + R (si vous avez un Mac) ou Ctrl + Shift + R (sur un PC).

À propos du traducteur

L'article a été traduit par Alconost.

Alconost localise des jeux , des applications et des sites en 68 langues. Traducteurs en langue maternelle, tests linguistiques, plateforme cloud avec API, localisation continue, chefs de projet 24/7, tout format de ressources de chaîne.

Nous réalisons également des vidéos de publicité et de formation - pour les sites qui vendent, présentent des images, de la publicité, des formations, des teasers, des explicateurs, des bandes-annonces pour Google Play et l'App Store.

Plus de détails