Maison > Article > interface Web > Quelles sont les trois façons de définir le cache en HTML
Quelles sont les trois façons de définir le cache en HTML
- WBOYoriginal
- 2024-02-22 22:57:041143parcourir
Quelles sont les trois façons de définir le cache en HTML ? Dans le développement Web, afin d'améliorer la vitesse d'accès des utilisateurs et de réduire la charge du serveur, nous pouvons réduire le temps de chargement des pages Web en définissant le cache. Ensuite, je vais vous présenter en détail trois méthodes de cache HTML couramment utilisées et vous fournir des exemples de code spécifiques.
Méthode 1 : Définir le cache via l'en-tête de réponse HTTP
« Cache-Control » et « Expires » dans l'en-tête de réponse HTTP sont deux attributs couramment utilisés pour définir le cache. En définissant ces deux propriétés, vous pouvez contrôler le comportement de mise en cache du navigateur pour le contenu Web.
- Attribut Cache-Control
L'attribut Cache-Control est défini dans l'en-tête de réponse HTTP et est utilisé pour spécifier comment le navigateur met en cache le contenu de la page Web. Il peut avoir plusieurs valeurs, les plus couramment utilisées sont :
- public : permet la mise en cache publique, c'est-à-dire que tous les serveurs de cache et navigateurs peuvent mettre la page Web en cache.
- privé : seule la mise en cache privée est autorisée, c'est-à-dire que seul le navigateur peut mettre la page Web en cache.
- no-store : Désactivez la mise en cache, le navigateur ne mettra pas en cache le contenu de la page Web.
- max-age : Définissez la durée de validité maximale du cache, en secondes.
Ce qui suit est un exemple, définissant Cache-Control sur public et max-age sur 3600 secondes (1 heure) :
HTTP/1.1 200 OK Cache-Control: public, max-age=3600
- Attribut Expires
L'attribut Expires est une valeur de temps absolue utilisée pour spécifier l'expiration du cache. temps. Cette heure est une chaîne de date au format GMT, indiquant que le cache expirera après cette heure.
Ce qui suit est un exemple, définissant l'expiration au 1er janvier 2022 :
HTTP/1.1 200 OK Expires: Sat, 01 Jan 2022 00:00:00 GMT
Méthode 2 : utiliser des balises HTML pour définir le cache
En plus de définir les attributs du cache via les en-têtes de réponse HTTP, nous pouvons également utiliser des balises HTML pour définir le cache. . Les balises couramment utilisées incluent et .
- Utilisez la balise
La balise peut être placée dans la balise
Ce qui suit est un exemple, définissant Cache-Control sur public et max-age sur 3600 secondes :
<html> <head> <meta http-equiv="Cache-Control" content="public, max-age=3600"> </head> <body> <!-- 网页内容 --> </body> </html>
- Utilisez la balise
Fichiers CSS. Nous pouvons définir les attributs du cache dans la balise
Ce qui suit est un exemple, définissant Cache-Control sur public et max-age sur 3600 secondes :
<link rel="stylesheet" href="styles.css" type="text/css"
http-equiv="Cache-Control" content="public, max-age=3600">Méthode 3 : Utiliser JavaScript pour définir le cache
En plus de définir les attributs de cache à l'aide des en-têtes de réponse HTTP et des balises HTML, nous peut également utiliser JavaScript pour définir le cache.
En utilisant l'objet localStorage ou sessionStorage du navigateur, nous pouvons stocker et lire des données pour obtenir l'effet de mise en cache.
Ce qui suit est un exemple d'utilisation de localStorage pour définir une paire clé-valeur et en obtenir la valeur :
<script>
// 设置缓存
localStorage.setItem("key", "value");
// 获取缓存
var value = localStorage.getItem("key");
console.log(value); // 输出"value"
</script>Résumé
En configurant le cache, nous pouvons améliorer efficacement la vitesse de chargement et l'expérience utilisateur des pages Web. En HTML, nous pouvons implémenter la mise en cache en définissant des en-têtes de réponse HTTP, à l'aide de balises HTML et JavaScript. En choisissant des méthodes et des attributs appropriés, les stratégies de mise en cache peuvent être personnalisées en fonction de différents scénarios et besoins.
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!