cache des paramètres HTML

Avec le développement des applications web, de plus en plus de données et de fichiers sont inclus dans les pages. Pour certaines données et fichiers réutilisés, le mécanisme de mise en cache du navigateur peut réduire efficacement les requêtes réseau et augmenter la vitesse à laquelle les utilisateurs accèdent aux pages. Définir le cache en HTML est un moyen simple et efficace. Voyons comment définir le cache en HTML.

1. Pourquoi devez-vous créer un cache ?

Lors de la navigation sur le Web, chaque chargement de page déclenchera une requête réseau, comprenant des requêtes de fichiers HTML, CSS, JavaScript et autres, ainsi que des images, des vidéos et d'autres ressources. Le temps requis pour les requêtes réseau constitue souvent le goulot d'étranglement de la vitesse de chargement des pages. Il est donc crucial de réduire le nombre de requêtes pour améliorer la vitesse de chargement des pages.

À ce stade, le mécanisme de mise en cache du navigateur doit entrer en jeu. Lorsqu'un utilisateur demande une page pour la première fois, le navigateur mettra en cache les ressources de la page (telles que CSS, JavaScript et autres fichiers). Lorsque l'utilisateur visite à nouveau la page, le navigateur peut obtenir ces ressources directement depuis le cache sans avoir à lancer une nouvelle requête. Cela réduit non seulement la charge sur le serveur, mais améliore également considérablement la vitesse d'accès des utilisateurs.

2. Comment définir le cache en HTML ?

Vous pouvez utiliser les en-têtes HTTP en HTML pour contrôler la manière dont la mise en cache est utilisée. Les en-têtes HTTP couramment utilisés incluent Expires et Cache-Control.

1. Expires

Expires spécifie une date ou une heure avant laquelle le navigateur considérera la ressource comme valide. Si la ressource est à nouveau consultée après cette date ou heure, le navigateur demandera à nouveau la ressource.

Côté serveur, la mise en cache du navigateur peut être réalisée en définissant Expires dans les en-têtes de réponse. Par exemple, définissez Expires sur 30 jours :

Expires: Fri, 16 Jul 2021 20:00:00 GMT

2. Cache-Control

Cache-Control est l'un des en-têtes HTTP les plus modernes qui contrôlent la mise en cache. Grâce à Cache-Control, nous pouvons contrôler finement la stratégie de cache.

Les attributs Cache-Control couramment utilisés sont :

• public : le cache peut être mis en cache par tous les utilisateurs (y compris les serveurs proxy) ;
• private : le cache ne peut être mis en cache que par les utilisateurs finaux, et les serveurs proxy intermédiaires ne peuvent pas le mettre en cache ;
• max-age : définissez le délai d'expiration du cache en secondes.

Par exemple, définissez Cache-Control sur public et max-age sur une semaine à partir de maintenant :

Cache-Control: public, max-age=604800

3. ETag

ETag est un autre mécanisme pour contrôler la mise en cache, il s'agit d'un unique généré en fonction de l'identifiant du contenu de la réponse. Lorsque le navigateur demande une ressource, le serveur renvoie la valeur ETag de la ressource au navigateur. La prochaine fois que la ressource est demandée, le navigateur envoie la valeur ETag précédente au serveur via If-None-Match pour demander si la ressource a changé.

Si la ressource n'a pas changé, le serveur renverra une réponse 304 Not Modified et inclura l'ETag dans les en-têtes de réponse ; si la ressource a changé, le serveur renverra la nouvelle ressource et mettra à jour l'ETag.

Côté serveur, la mise en cache du navigateur peut être réalisée en définissant l'ETag dans les en-têtes de réponse. Par exemple :

ETag: "1234"

3. Choses à noter lors de la configuration du cache

Lors de l'utilisation du cache, vous devez également faire attention aux points suivants.

1. Évitez de mettre en cache des informations privées

Lorsque le cache définit l'attribut public, le contenu mis en cache est accessible à tous les utilisateurs, y compris les caches du navigateur et les caches du serveur proxy. Par conséquent, il est nécessaire d’éviter de mettre en cache des informations privées (telles que les mots de passe des utilisateurs, etc.).

2. Vous devriez envisager de forcer une actualisation lors de la mise à jour du cache

Lorsque le contenu de la page change, le cache du navigateur de l'utilisateur doit être actualisé. À ce stade, vous pouvez utiliser l'attribut max-age de Cache-Control pour définir la durée de validité du cache en secondes.

Par exemple, définir Cache-Control sur max-age=0 peut forcer le navigateur à demander à nouveau des ressources et à mettre à jour le cache :

Cache-Control: max-age=0

3. Différentes ressources doivent définir différentes stratégies de mise en cache

Pour la plupart des ressources statiques (telles que images, CSS, JS, etc.), vous pouvez définir une durée maximale d'âge plus longue pour améliorer l'efficacité opérationnelle. Pour certaines ressources dynamiques qui changent fréquemment, des mécanismes tels que ETag doivent être utilisés pour garantir que la ressource est mise à jour à chaque fois qu'elle est demandée.

Résumé :

La définition du cache en HTML est l'une des méthodes courantes pour améliorer les performances des pages. En définissant des en-têtes HTTP tels que Expires, Cache-Control et ETag, vous pouvez implémenter le mécanisme de mise en cache du navigateur et améliorer la vitesse d'accès des utilisateurs. Lors de la configuration d'un cache, vous devez prêter attention aux paramètres détaillés du cache et aux différentes stratégies de mise en cache pour diverses ressources afin d'obtenir les meilleurs résultats.

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!