Les fichiers HTML seront-ils mis en cache ?
Titre : Mécanisme de mise en cache et exemples de code de fichiers HTML
Introduction : Lors de la rédaction de pages Web, nous rencontrons souvent des problèmes de cache du navigateur. Cet article présentera en détail le mécanisme de mise en cache des fichiers HTML et fournira quelques exemples de code spécifiques pour aider les lecteurs à mieux comprendre et appliquer ce mécanisme.
1. Principe de mise en cache du navigateur
Dans le navigateur, chaque fois qu'une page Web est consultée, le navigateur vérifie d'abord s'il y a une copie de la page Web dans le cache. Si tel est le cas, le contenu de la page Web est obtenu directement à partir du cache. C'est le principe de base de la mise en cache du navigateur. L'avantage du mécanisme de mise en cache du navigateur est qu'il peut améliorer la vitesse de chargement des pages Web, réduire les requêtes réseau et économiser la bande passante.
2. Méthodes de mise en cache HTML
La mise en cache des fichiers HTML peut être contrôlée des deux manières suivantes :
-
Expires et Cache-Control
En ajoutant les champs Expires et Cache-Control dans l'en-tête de réponse HTTP, vous pouvez contrôler le navigateur Le temps de mise en cache du fichier. L'exemple de code spécifique est le suivant :HTTP/1.1 200 OK Content-Type: text/html Cache-Control: max-age=3600 Expires: Wed, 04 Aug 2022 08:00:00 GMT <!DOCTYPE html> <html> <!-- HTML页面内容 --> </html>
Copier après la connexionDans l'exemple de code ci-dessus, le champ Cache-Control spécifie le temps de cache maximum de 3 600 secondes, soit une heure, et le champ Expires spécifie le délai d'expiration du cache à 8h00. 4 août 2022.
Last-Modified et If-Modified-Since
indique l'heure de la dernière modification du fichier en ajoutant le champ Last-Modified dans l'en-tête de réponse HTTP. Une fois que le navigateur a mis le fichier en cache, il ajoutera le champ If-Modified-Since la prochaine fois qu'il demandera le fichier et enverra l'heure de la dernière modification du dernier fichier mis en cache au serveur. Le serveur déterminera si le fichier a été mis à jour en fonction. à cette heure. Si le fichier n'a pas été mis à jour, une réponse 304 Not Modified est renvoyée et le navigateur continue d'utiliser le fichier mis en cache. L'exemple de code spécifique est le suivant :HTTP/1.1 200 OK Content-Type: text/html Last-Modified: Mon, 01 Aug 2022 12:00:00 GMT <!DOCTYPE html> <html> <!-- HTML页面内容 --> </html>
Copier après la connexionDans l'exemple de code ci-dessus, le champ Last-Modified spécifie que la dernière heure de modification du fichier est 12h00 le 1er août 2022.
3. Stratégie de contrôle du cache
Selon les besoins réels, nous pouvons formuler différentes stratégies de mise en cache en fonction du contenu du fichier ou d'autres conditions pour mieux contrôler la mise en cache du navigateur.
Mise en cache des fichiers statiques
Pour les fichiers statiques qui ne changent pas fréquemment, vous pouvez définir une durée de cache plus longue afin que le navigateur puisse mettre en cache le fichier de manière persistante et réduire les requêtes adressées au serveur. Par exemple, pour les fichiers statiques tels que CSS, JavaScript et images, vous pouvez définir la durée du cache sur un an. L'exemple de code est le suivant :HTTP/1.1 200 OK Content-Type: text/css Cache-Control: max-age=31536000 /* CSS文件内容 */
Copier après la connexionCache de fichiers dynamique
Pour les fichiers dynamiques qui changent fréquemment, vous pouvez contrôler la durée du cache pour qu'elle soit plus courte afin de garantir que le navigateur puisse obtenir le dernier contenu du fichier en temps opportun. Par exemple, les fichiers HTML générés dynamiquement ne peuvent définir aucun champ de cache, ce qui permet au navigateur de demander la dernière version à chaque fois. L'exemple de code est le suivant :HTTP/1.1 200 OK Content-Type: text/html Cache-Control: no-cache, no-store, must-revalidate Pragma: no-cache Expires: 0 <!DOCTYPE html> <html> <!-- HTML页面内容 --> </html>
Copier après la connexionCache de contrôle de version
Lorsque le fichier est mis à jour, conservez le nom du fichier inchangé et faites croire au navigateur qu'il s'agit d'un nouveau fichier en ajoutant un numéro de version ou un horodatage au nom du fichier ou URL rechargeant ainsi le fichier. L'exemple de code est le suivant :<link rel="stylesheet" href="/static/style.css?v=1.0"> <script src="/static/script.js?t=1627836018"></script>
Copier après la connexion
4. Résumé
La mise en cache des fichiers HTML est réalisée en définissant les champs correspondants dans l'en-tête de réponse HTTP. En contrôlant correctement le temps de cache et les politiques, la vitesse de chargement des pages Web et l'expérience utilisateur peuvent être améliorées. Dans le développement réel, les méthodes et stratégies de mise en cache appropriées sont sélectionnées en fonction du contenu et des caractéristiques du fichier. Nous espérons que les exemples de code fournis dans cet article pourront aider les lecteurs à mieux comprendre et utiliser le mécanisme de mise en cache HTML.
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment personnaliser le symbole de redimensionnement via CSS et le rendre uniforme avec la couleur d'arrière-plan?
Apr 05, 2025 pm 02:30 PM
La méthode de personnalisation des symboles de redimension dans CSS est unifiée avec des couleurs d'arrière-plan. Dans le développement quotidien, nous rencontrons souvent des situations où nous devons personnaliser les détails de l'interface utilisateur, tels que l'ajustement ...
Comment afficher correctement le 'Jingnan Mai Round Body' installé localement sur la page Web?
Apr 05, 2025 pm 10:33 PM
En utilisant récemment des fichiers de police installés localement dans les pages Web, j'ai téléchargé une police gratuite à partir d'Internet et je l'ai installée avec succès dans mon système. Maintenant...
Comment réaliser un effet d'écart sur la disposition de la carte et des coupons avec fond de gradient?
Apr 05, 2025 am 07:48 AM
Réalisez l'effet d'écart de la disposition des coupons de carte. Lors de la conception de la disposition des coupons de carte, vous rencontrez souvent la nécessité d'ajouter des lacunes sur les coupons de carte, surtout lorsque l'arrière-plan est le gradient ...
Le texte sous la disposition Flex est omis mais le conteneur est ouvert? Comment le résoudre?
Apr 05, 2025 pm 11:00 PM
Le problème de l'ouverture des conteneurs en raison d'une omission excessive du texte sous disposition flexible et de solutions est utilisé ...
Pourquoi un élément div spécifique dans le navigateur Edge ne s'affiche-t-il pas? Comment résoudre ce problème?
Apr 05, 2025 pm 08:21 PM
Comment résoudre le problème d'affichage causé par les feuilles de style d'agent utilisateur? Lorsque vous utilisez le navigateur Edge, un élément DIV du projet ne peut pas être affiché. Après avoir vérifié, j'ai posté ...
Pourquoi les marges négatives ne prennent-elles pas effet dans certains cas? Comment résoudre ce problème?
Apr 05, 2025 pm 10:18 PM
Pourquoi les marges négatives ne prennent-elles pas effet dans certains cas? Pendant la programmation, les marges négatives dans CSS (négatif ...
Comment obtenir des données d'application et de visionneuse en temps réel sur la page de travail 58.com?
Apr 05, 2025 am 08:06 AM
Comment obtenir des données dynamiques de la page de travail 58.com tout en rampant? Lorsque vous rampez une page de travail de 58.com en utilisant des outils de chenilles, vous pouvez rencontrer cela ...
Comment utiliser CSS et Flexbox pour implémenter la disposition réactive des images et du texte à différentes tailles d'écran?
Apr 05, 2025 pm 06:06 PM
Implémentation de dispositions réactives à l'aide de CSS lorsque nous voulons implémenter des modifications de mise en page sous différentes tailles d'écran dans la conception Web, CSS ...
