Parlons des connaissances sur la mise en cache HTML

Avec l'augmentation des visites de sites Web, la manière de charger rapidement les pages Web est devenue un aspect important de l'expérience utilisateur. La technologie de mise en cache HTML est l'un des moyens efficaces pour résoudre ce problème. Cet article présentera le concept, les méthodes de configuration et les techniques d'optimisation de la mise en cache HTML.

1. Le concept de mise en cache HTML

La mise en cache HTML, c'est-à-dire la mise en cache du navigateur, fait référence à la mise en cache des ressources de page (telles que HTML, CSS, JS et autres fichiers) dans le navigateur afin qu'elles puissent être mises en cache à partir du cache local. lors de la prochaine visite Lisez au lieu de passer par une requête réseau. Cela peut réduire efficacement le nombre de demandes de ressources, accélérer le chargement des pages et améliorer l'expérience utilisateur.

2. Comment configurer le cache HTML

1. Paramètres côté serveur

Côté serveur, vous pouvez contrôler si le navigateur met en cache les ressources de la page en définissant l'en-tête de réponse HTTP. Les en-têtes de réponse HTTP couramment utilisés sont les suivants :

• Cache-Control : utilisé pour contrôler le comportement du cache, notamment max-age, no-cache, no-store, etc. Parmi eux, max-age indique la durée maximale (en secondes) pendant laquelle la ressource peut être mise en cache, no-cache indique que le client est obligé de vérifier la validité des données mises en cache avant d'utiliser les ressources mises en cache, et no-store indique que le navigateur il est interdit de mettre les données en cache.
• Expires : délai d'expiration du cache, utilisé pour indiquer au navigateur quand il doit à nouveau demander des ressources.
• Last-Modified : L'heure de la dernière modification de la ressource, utilisée pour aider le navigateur à vérifier la validité des données mises en cache.
• ETag : L'identifiant unique de la ressource, également utilisé pour aider le navigateur à vérifier la validité des données mises en cache.

2. Paramètres client

Côté client, vous pouvez définir le cache HTML des manières suivantes :

• Balise méta HTML : Ajoutez une balise méta au fichier HTML pour spécifier la stratégie de cache de la page. Les balises méta couramment utilisées sont les suivantes :

<meta http-equiv="Cache-Control" content="max-age=3600, must-revalidate">
<meta http-equiv="Expires" content="Sat, 1 Jan 2022 00:00:00 GMT">

Parmi elles, l'utilisation de Cache-Control et Expires est la même que les paramètres côté serveur.

• JavaScript : modifiez la politique de mise en cache du navigateur via le code JavaScript. Par exemple :

if( window.localStorage ){ // 支持本地存储 
  if( !localStorage.getItem('firstLoadTime') ){ // 判断是否第一次访问 
    localStorage['firstLoadTime'] = (new Date()).getTime(); 
  }else if( (new Date()).getTime() - localStorage['firstLoadTime'] > 1000 * 60 * 60 * 24 * 7 ){ // 缓存一周 
    localStorage.clear(); 
    localStorage['firstLoadTime'] = (new Date()).getTime(); 
  }
}

Ce code fixe le temps de cache de la page à une semaine.

3. Compétences d'optimisation pour le cache HTML

1. Séparation des ressources statiques et des ressources dynamiques

Séparer les ressources statiques (CSS, JS, images, etc.) des ressources dynamiques (HTML, PHP, ASP, etc.) Méthode d'optimisation commune. À ce stade, vous pouvez définir une durée de cache plus longue pour les ressources statiques afin de réduire le nombre de requêtes et la consommation de bande passante.

2. Conception de localisateur de ressources unique (URL)

La conception d'URL affectera également l'efficacité de la mise en cache. Par conséquent, l'URL peut être conçue de la manière suivante :

• Divisez les répertoires selon les types de ressources : par exemple, utilisez "/css/", "/js/", "/img/", etc. pour diviser les répertoires.
• Essayez d'éviter d'utiliser des paramètres dynamiques dans l'URL : par exemple, "/index.php?name=xxx" peut être remplacé par "/user/xxx.html".

3. Vérification de la validité du cache

La vérification de la validité du cache peut être réalisée via les paramètres Last-Modified et ETag côté serveur. Lorsque le cache du navigateur expire, vous pouvez envoyer une requête au serveur pour vérifier si la ressource mise en cache est toujours valide. Si elle est valide, la ressource mise en cache peut être lue directement depuis le local, sinon la ressource doit être demandée à nouveau.

4. Résumé

La technologie de mise en cache HTML est une méthode d'optimisation efficace qui peut accélérer le chargement des pages et améliorer l'expérience utilisateur. En utilisation réelle, vous devez utiliser de manière flexible les paramètres côté serveur et les paramètres côté client, et faire attention à la vérification de la validité du cache et à la conception des URL.

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!