Comment utiliser le cache du navigateur frontal

Je vous ai déjà présenté la mise en cache du navigateur, ainsi que la mise en cache HTML hors ligne. Il est facile de se tromper si j'en parle trop. Aujourd'hui, je vais vous expliquer la différence entre ces caches et comment utiliser le cache.

200 du cache mémoire n'accède pas au serveur, lit directement le cache et lit le cache de la mémoire. À ce moment-là, les données sont mises en cache en mémoire. Une fois le processus arrêté, c'est-à-dire après la fermeture du navigateur, les données n'existeront plus. Cependant, cette méthode ne peut mettre en cache que les ressources dérivées

200 du cache disque sans accéder au serveur, en lisant le cache directement et en lisant le cache à partir du disque. Lorsque le processus est arrêté, les données existent toujours. Cette méthode ne peut mettre en cache que les ressources dérivées

304 Non modifié. Accédez au serveur et constatez que les données n'ont pas été mises à jour. Le serveur renvoie ce code d'état. Lisez ensuite les données du cache.

Principe du cache à trois niveaux

Allez d'abord dans la mémoire, s'il y en a, chargez-la directement

S'il n'y a pas de mémoire, sélectionnez le disque dur pour obtenir il, s'il y en a, chargez-le directement

S'il n'y a pas de disque dur, alors faites une requête réseau

Mettez en cache les ressources chargées sur le disque dur et la mémoire

Parcourez généralement les images, comme suit :

Accès-> 200 -> Quitter le navigateur

Entrez à nouveau-> ; Actualiser-> 200 (à partir du cache mémoire)

cache d'application Il est un peu différent du cache ci-dessus, ce qui signifie que les ressources peuvent être lues à partir du disque dur sans être connectées au cache. Internet Même si Internet est déconnecté, les utilisateurs peuvent naviguer.

Définir le cache du navigateur

304 Est-il nécessaire de négocier le cache ou de communiquer une fois avec le serveur Si vous souhaitez couper la communication du serveur, vous devez forcer le navigateur à utiliser le cache local (cache ? -control/expires),

Généralement, il existe plusieurs façons de définir le cache du navigateur.

1. L'ensemble expire et contrôle le cache via HTTP META

<meta http-equiv="Cache-Control" content="max-age=7200" />
 <meta http-equiv="Expires" content="Sun Oct 15 2017 20:39:53 GMT+0800 (CST)" />

Écrit de cette manière, il n'est valable que pour la page Web et n'est pas valide pour les images ou autres demandes dans le page web.

2. Images de configuration du serveur Apache, css, js, cache flash

Cette technologie est principalement implémentée via la configuration du serveur Si vous utilisez un serveur Apache, vous pouvez utiliser le module mod_expires pour implémenter :

Compilez le module mod_expires :

Cd  /root/httpd-2.2.3/modules/metadata/usr/local/apache/bin/apxs -i -a -c mod_expires.c //编译

Ouvrez d'abord le fichier httpd.conf, puis recherchez le module expires. Après l'avoir trouvé, supprimez le signe # à gauche pour l'indiquer. ce module est activé et redémarrez le serveur apache

Modifiez la configuration httpd.conf : ajoutez le contenu suivant

<IfModule mod_expires.c>ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/html "access plus 1 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
EXpiresByType application/x-shockwave-flash "access plus 1 months"
EXpiresByType application/x-javascript      "access plus 1 months"
#ExpiresByType video/x-flv "access plus 1 months"</IfModule>

3, php et autres paramètres

<?php
  header("Cache-Control: public");
  header("Pragma: cache");
  $offset = 30*60*60*24; // cache 1 month
  $ExpStr = "Expires: ".gmdate("D, d M Y H:i:s", time() + $offset)." GMT";
  header($ExpStr);?>

ou

$seconds_to_cache = 3600;$ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT";header("Expires: $ts"); header("Pragma: cache");header("Cache-Control: max-age=$seconds_to_cache");

état du cache Déploiement du code front-end

Question 1 : Avec le cache, comment mettre à jour le code front-end ?

Nous pouvons ajouter le numéro de version après le fichier de ressource ou l'image, comme indiqué ci-dessous.

Question 2 : Mais une fois que tous les fichiers ont des numéros de version ajoutés, nous n'avons modifié qu'un seul fichier. Le cache des autres fichiers n'est-il pas gaspillé ?

Pour résoudre ce problème, nous pouvons utiliser l'algorithme datasummary pour obtenir des informations récapitulatives sur le fichier, et les informations récapitulatives correspondent au contenu du fichier un à un. Comme indiqué ci-dessous :

Cela résout le problème.

Question 3 : Un nouveau problème est réapparu. Que dois-je faire lors de la publication de fichiers ?

1. Déployez d'abord la page, puis déployez les ressources : Pendant l'intervalle de temps entre les deux déploiements, si un utilisateur accède à la page, les anciennes ressources seront chargées dans la nouvelle structure de la page, et l'ancienne version sera La ressource est mise en cache comme une nouvelle version. Le résultat est que l'utilisateur accède à une page avec un style désordonné. À moins d'être actualisée manuellement, la page continuera à exécuter des erreurs jusqu'à l'expiration du cache de ressources.

2. Déployez d'abord les ressources, puis déployez les pages : dans l'intervalle de temps de déploiement, les utilisateurs disposant d'un cache local des ressources de l'ancienne version visitent le site Web. Étant donné que la page demandée est une ancienne version, la ressource fait référence. Aucun changement, le navigateur utilisera directement le cache local. Dans ce cas, la page s'affichera normalement mais si les utilisateurs sans cache local ou cache expiré visitent le site Web, la page de l'ancienne version chargera la ressource de la nouvelle version, ce qui entraîne dans l'erreur d'exécution de la page. Mais lorsque la page est déployée, ces utilisateurs reviendront à la normale lorsqu'ils visiteront à nouveau la page.

D'accord, ce que je veux dire à partir de l'analyse ci-dessus est : personne ne peut déployer en premier ! Cela entraînera une confusion des pages pendant le processus de déploiement. Par conséquent, pour les projets à faible trafic, les étudiants en R&D peuvent travailler dur et se connecter secrètement au milieu de la nuit. Téléchargez d'abord des ressources statiques, puis déployez la page. Il semblera qu'il y aura moins de problèmes.

Comment résoudre ces problèmes ?

Ce problème provient de la libération par superposition des ressources. Ce problème se produit lorsque les ressources à libérer sont utilisées pour couvrir des ressources publiées. Il est facile de le résoudre, c'est-à-dire d'implémenter une publication sans couverture

Il y a tellement d'aspects sur la mise en cache Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture connexe :

Comment implémenter le code carrousel du graphique de mise au point numérique en HTML

HTML Comment gérer l'affichage incomplet de la dernière ligne de texte

Comment utiliser le canevas pour créer un effet d'animation de fontaine de particules

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!