Révéler les secrets du mécanisme de mise en cache HTML : points de connaissances essentiels

Mécanisme de mise en cache HTML révélé : points de connaissances essentiels, des exemples de code spécifiques sont requis

Dans le développement Web, les performances ont toujours été une considération importante. Le mécanisme de mise en cache HTML est l'une des clés pour améliorer les performances des pages Web. Cet article révélera les principes et les compétences pratiques du mécanisme de mise en cache HTML et fournira des exemples de code spécifiques.

1. Principe du mécanisme de mise en cache HTML

Lors de l'accès à une page Web, le navigateur demande au serveur d'obtenir la page HTML via le protocole HTTP. Le mécanisme de mise en cache HTML consiste à mettre en cache les pages HTML côté navigateur afin de réduire le nombre de requêtes adressées au serveur.

Plus précisément, lorsque le navigateur demande la page pour la première fois, le serveur renvoie un en-tête de réponse avec une identification du cache (comme Etag ou Last-Modified). Le navigateur stocke ces informations d'en-tête de réponse et met en cache la page HTML dans le cache local. La prochaine fois que la même page est demandée, le navigateur envoie les informations d'identification du cache stockées au serveur. Le serveur détermine si une nouvelle page doit être renvoyée sur la base des informations d'identification du cache. Si le serveur détermine qu'il n'est pas nécessaire de renvoyer une nouvelle page, il renvoie un code d'état 304 pour indiquer au navigateur de continuer à utiliser la page mise en cache.

2. Compétences pratiques

1. Définir le délai d'expiration du cache

Définir le délai d'expiration du cache de la page HTML sur le serveur Web, ce qui peut contrôler efficacement le temps de cache du navigateur de la page. Généralement, les pages HTML statiques peuvent être mises en cache pendant une période plus longue, par exemple une semaine ou un mois. Les pages HTML dynamiques peuvent être définies pour une durée de cache plus courte, par exemple une heure ou un jour. En définissant correctement le délai d'expiration du cache, vous pouvez améliorer les performances d'accès aux pages tout en garantissant les mises à jour des pages.

2. Mécanisme d'actualisation forcée

Lorsque la page est mise à jour, il est parfois nécessaire de forcer le navigateur à actualiser le cache pour obtenir le dernier contenu de la page. L'actualisation forcée peut être obtenue en ajoutant des paramètres à l'URL. Par exemple, ajoutez un paramètre d'horodatage après l'URL et définissez la valeur du paramètre sur l'horodatage actuel à chaque fois que la page est mise à jour. De cette façon, le navigateur pensera que l'URL demandée à chaque fois est différente, ignorera le cache et obtiendra le dernier contenu de la page directement depuis le serveur.

3. Mécanisme de contrôle du numéro de version

Dans certains cas, les ressources statiques (telles que les fichiers CSS, JS) dans la page changent, mais la page HTML ne change pas. Afin de permettre au navigateur de recharger les ressources statiques, vous pouvez ajouter un paramètre de numéro de version à l'URL. Chaque fois que la ressource statique change, la valeur du paramètre numéro de version est mise à jour. De cette façon, le navigateur pensera que l’URL demandée est différente à chaque fois et rechargera la ressource statique.

3. Exemples de code spécifiques

1. Définissez le délai d'expiration du cache

Ajoutez les champs Content-Type et Cache-Control dans l'en-tête de réponse du serveur Web pour définir le délai d'expiration du cache.

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Cache-Control: max-age=604800

Parmi eux, max-age=604800 signifie que le délai d'expiration du cache est d'une semaine.

2. Mécanisme d'actualisation forcée

Ajoutez un paramètre d'horodatage après l'URL et définissez sa valeur sur l'horodatage actuel.

http://example.com/page.html?_t=1596046321438

Modifiez la valeur de l'horodatage à chaque fois que la page est mise à jour.

3. Mécanisme de contrôle du numéro de version

Ajoutez un paramètre de numéro de version à l'URL et définissez sa valeur sur le numéro de version de la ressource statique.

http://example.com/style.css?v=2.0

Chaque fois que la ressource statique change, mettez à jour la valeur du numéro de version.

4. Résumé

Le mécanisme de mise en cache HTML est l'un des moyens importants pour améliorer les performances des pages Web. En définissant correctement le délai d'expiration du cache, le mécanisme d'actualisation forcée et le mécanisme de contrôle du numéro de version, vous pouvez mieux utiliser le mécanisme de mise en cache du navigateur et améliorer les performances d'accès aux pages. Les exemples de code fournis ci-dessus peuvent aider les développeurs à mieux comprendre et appliquer le mécanisme de mise en cache HTML.

(Remarque : cet article présente principalement les principes de base et les compétences pratiques du mécanisme de mise en cache HTML, et fournit des exemples de code spécifiques auxquels les lecteurs peuvent se référer et apprendre. Dans la pratique spécifique, une configuration et des ajustements raisonnables doivent être effectués en fonction des besoins et des besoins du projet. conditions réelles. )

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!