Maison >interface Web >js tutoriel >Mise en cache HTTP : tout ce que vous devez savoir

Mise en cache HTTP : tout ce que vous devez savoir

DDD
DDDoriginal
2025-01-20 02:32:14242parcourir

HTTP Caching : Everything You Need to Know

Explication détaillée du mécanisme de mise en cache HTTP

La mise en cache HTTP est une technologie qui améliore les performances des pages Web en réduisant la charge du serveur, en accélérant la réponse du client et en économisant la bande passante du réseau. La mise en cache HTTP est principalement divisée en deux types : la mise en cache forcée et la mise en cache négociée.

Forcer la mise en cache

La mise en cache forcée permet au client d'utiliser directement les ressources mises en cache localement dans une période de temps spécifiée sans envoyer de requête au serveur. La mise en cache forcée est contrôlée par l'en-tête de réponse spécifié par le serveur, principalement via deux champs : Cache-Control et Expires.

Cache-Contrôle

Cache-Control est un en-tête général qui précise la durée de validité maximale de la ressource (max-age), si le cache peut être partagé (public ou privé) et si la modification est autorisée (non- cache ou pas de magasin).

Exemple :

<code>Cache-Control: max-age=3600</code>

Ce qui précède signifie que la ressource est valide pendant 3 600 secondes et peut être mise en cache.

Expire

Expires est un champ obsolète qui spécifie le délai d'expiration absolu du cache.

Exemple :

<code>Expires: Wed, 23 Aug 2024 03:36:26 GMT</code>

Cela signifie que la ressource expirera le 23 août 2024 à 3:36:26.

Si Cache-Control et Expires existent, alors Cache-Control est prioritaire.

Cache de négociation

La négociation de la mise en cache nécessite que le client vérifie si la ressource du serveur a été mise à jour à chaque requête. S'il n'est pas mis à jour, le serveur renvoie un code d'état 304 et un corps de réponse vide, permettant au client de continuer à utiliser le cache local. S'il est mis à jour, le serveur renverra un code d'état 200 et la nouvelle ressource, remplaçant le cache local. Le cache de négociation implique les en-têtes du serveur et du client, principalement Last-Modified/If-Modified-Since et ETag/If-None-Match.

Dernière modification/Si-modification-depuis

Last-Modified est un champ côté serveur indiquant l'heure de la dernière modification de la ressource. Exemple :

<code>Last-Modified: Tue, 22 Aug 2024 02:36:26 GMT</code>

Cela signifie que la ressource a été modifiée pour la dernière fois le 22 août 2024 à 02:36:26.

If-Modified-Since est un champ côté client indiquant la dernière fois que la ressource a été récupérée. Exemple :

<code>If-Modified-Since: Tue, 22 Aug 2024 02:36:26 GMT</code>

Cela signifie que le client a récupéré la ressource le 22 août 2024 à 02:36:26.

Si les deux horodatages sont égaux ou si Last-Modified est antérieur, la ressource n'est pas mise à jour. Si Last-Modified est postérieur, la ressource a été mise à jour.

ETag/Si-Aucun-Match

ETag est un champ côté serveur qui représente un identifiant unique pour une ressource. Exemple :

<code>ETag: '5d3a9f6d-1f86'</code>

Cela signifie que l'identifiant de la ressource est "5d3a9f6d-1f86".

If-None-Match est un champ côté client indiquant l'identifiant attendu de la ressource. Exemple :

<code>If-None-Match: '5d3a9f6d-1f86'</code>

Cela signifie que le client attend un identifiant de ressource de "5d3a9f6d-1f86".

Si les deux valeurs correspondent, la ressource n'est pas mise à jour. S'ils sont différents, la ressource a été mise à jour.

Meilleures pratiques de mise en cache HTTP

La combinaison de la mise en cache négociée et de la mise en cache forcée peut réduire efficacement les requêtes réseau inutiles tout en garantissant que les utilisateurs disposent toujours du contenu le plus récent.

Méthode générale :

Forcer la mise en cache : pour les ressources statiques (par exemple CSS, JS, images), définissez une durée de cache plus longue. Cela permet au navigateur de récupérer les ressources directement à partir du stockage local sans contacter le serveur.

Cache de négociation : Pour les ressources susceptibles de changer, utilisez le cache de négociation. Le navigateur enverra une demande pour vérifier si la ressource a changé. Sinon, le serveur renverra une réponse 304 Not Modified, permettant au navigateur d'utiliser le cache local. Si la ressource a changé, le serveur renverra 200 OK et la ressource mise à jour.

Exemple de mise en œuvre :

Supposons que nous utilisions Express.js comme framework backend :

<code>Cache-Control: max-age=3600</code>

Considérations clés

  • Gestion des versions : pour maximiser l'efficacité de la mise en cache forcée, incluez les informations de version dans l'URL de la ressource, par exemple /static/js/main.2024082301.js. Lorsqu'une ressource est mise à jour, modifiez le numéro de version pour garantir que les utilisateurs obtiennent toujours la dernière version.
  • Coût de la mise en cache des négociations : bien que la mise en cache des négociations réduise les transferts de données inutiles, elle nécessite toujours un aller-retour sur le réseau. Pour les ressources qui changent rarement, forcer la mise en cache peut être plus efficace.

Leapcell : Votre meilleur choix pour héberger des projets backend

HTTP Caching : Everything You Need to Know

Leapcell est une plateforme sans serveur nouvelle génération pour l'hébergement web, les tâches asynchrones et Redis :

Support multilingue

  • Développez avec Node.js, Python, Go ou Rust.

Déployez un nombre illimité de projets gratuitement

  • Payez uniquement ce que vous utilisez - pas de demandes, pas de frais.

Une rentabilité inégalée

  • Payez au fur et à mesure, pas de frais d'inactivité.
  • Exemple : 25 $ prend en charge 6,94 millions de requêtes avec un temps de réponse moyen de 60 millisecondes.

Expérience développeur simplifiée

  • Interface utilisateur intuitive, facile à configurer.
  • Pipeline CI/CD entièrement automatisé et intégration GitOps.
  • Mesures et journalisation en temps réel pour des informations exploitables.

Évolutivité facile et hautes performances

  • Mise à l'échelle automatique pour gérer facilement une concurrence élevée.
  • Zéro frais opérationnels - concentrez-vous uniquement sur la construction.

Apprenez-en plus dans la documentation !

HTTP Caching : Everything You Need to Know

Suivez-nous sur X : @LeapcellHQ


Lisez notre blog

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn