So verwenden Sie den Front-End-Browser-Cache

Ich habe Ihnen das Browser-Caching bereits vorgestellt und auch das HTML-Offline-Caching. Wenn ich zu viel darüber rede, kann man leicht verwirrt werden. Heute werde ich Ihnen den Unterschied zwischen diesen Caches und der Verwendung des Caches erklären.

200 aus dem Speichercache Lesen Sie den Cache direkt aus, ohne auf den Server zuzugreifen, und lesen Sie den Cache aus dem Speicher. Die Daten werden zu diesem Zeitpunkt im Speicher zwischengespeichert. Nachdem der Prozess beendet wurde, dh nachdem der Browser geschlossen wurde, sind die Daten nicht mehr vorhanden. Diese Methode kann jedoch nur abgeleitete Ressourcen

200 aus dem Festplatten-Cache zwischenspeichern, ohne auf den Server zuzugreifen, den Cache direkt zu lesen und den Cache von der Festplatte zu lesen. Wenn der Prozess abgebrochen wird, sind die Daten noch vorhanden. Diese Methode kann nur abgeleitete Ressourcen zwischenspeichern

304 Nicht geändert. Beim Zugriff auf den Server wird festgestellt, dass die Daten nicht aktualisiert wurden, und der Server gibt diesen Statuscode zurück. Lesen Sie dann die Daten aus dem Cache.

Prinzip des Caches der dritten Ebene

Gehen Sie zuerst zum Speicher. Wenn vorhanden, laden Sie ihn direkt.

Wenn kein Speicher vorhanden ist, wählen Sie die Festplatte aus, die Sie abrufen möchten Wenn es vorhanden ist, laden Sie es direkt

Wenn keine Festplatte vorhanden ist, stellen Sie eine Netzwerkanfrage

Zwischenspeichern Sie die geladenen Ressourcen auf der Festplatte und im Speicher

Durchsuchen Sie im Allgemeinen Bilder wie folgt:

Zugriff-> ; Refresh-> 200(aus dem Speichercache)

Anwendungscache Es ist ein Offline-Cache, was bedeutet, dass Ressourcen von der Festplatte gelesen werden können, ohne mit dem verbunden zu sein Internet: Auch wenn die Internetverbindung unterbrochen ist, können Benutzer surfen.

Browser-Cache festlegen

304 Ist es notwendig, den Cache auszuhandeln oder einmal mit dem Server zu kommunizieren? Wenn Sie die Serverkommunikation unterbrechen möchten, müssen Sie den Browser zwingen, den lokalen Cache (Cache) zu verwenden -control/expires),

Im Allgemeinen gibt es mehrere Möglichkeiten, den Browser-Cache festzulegen.

1. Ablauf und Cache-Kontrolle über HTTP META festlegen

So geschrieben gilt es nur für die Webseite und ist für Bilder oder andere Anfragen im Web ungültig Seite.

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

2. Apache-Serverkonfigurationsbilder, CSS, JS, Flash-Cache

Diese Technologie wird hauptsächlich durch die Serverkonfiguration implementiert, Sie können das Modul mod_expires verwenden, um Folgendes zu implementieren:

Kompilieren Sie das Modul „mod_expires“:

Öffnen Sie zuerst die Datei httpd.conf und suchen Sie dann nach dem Modul „expires“. Nachdem Sie es gefunden haben, löschen Sie das #-Zeichen auf der linken Seite, um dies anzuzeigen Dieses Modul wird aktiviert und der Apache-Server wird neu gestartet.

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

Bearbeiten Sie die httpd.conf-Konfiguration: Fügen Sie den folgenden Inhalt hinzu

3, PHP und andere Einstellungen

<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>

oder

<?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);?>

Cache-Status Front-End-Code-Bereitstellung

$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");

Frage 1: Wie aktualisiere ich den Front-End-Code mit Cache?

Wir können die Versionsnummer nach der Ressourcendatei oder dem Bild hinzufügen, wie unten gezeigt.

Frage 2: Aber nachdem wir allen Dateien Versionsnummern hinzugefügt haben, haben wir nur eine Datei geändert. Ist der Cache anderer Dateien nicht verschwendet?

Um dieses Problem zu lösen, können wir den Datenalgorithmus

Zusammenfassung

verwenden, um zusammenfassende Informationen für die Datei zu finden, und die zusammenfassenden Informationen entsprechen eins zu eins dem Dateiinhalt. Wie unten gezeigt: Dies löst das Problem.

Frage 3: Es ist wieder ein neues Problem aufgetreten. Was soll ich beim Veröffentlichen von Dateien tun?

1. Stellen Sie zuerst die Seite und dann die Ressourcen bereit: Wenn ein Benutzer in der Zeitspanne zwischen den beiden Bereitstellungen auf die Seite zugreift, werden die alten Ressourcen in der neuen Seitenstruktur und in der alten Version geladen Die Ressource wird als neue Version zwischengespeichert. Das Ergebnis ist, dass der Benutzer auf eine Seite mit einem ungeordneten Stil zugreift. Sofern die Seite nicht manuell aktualisiert wird, werden weiterhin Fehler ausgeführt, bis der Ressourcencache abläuft.

2. Stellen Sie zuerst Ressourcen bereit, dann stellen Sie Seiten bereit: Innerhalb des Bereitstellungszeitintervalls besuchen Benutzer mit lokalem Cache alter Versionsressourcen die Website, da es sich bei der angeforderten Seite um eine alte Version handelt, auf die die Ressource

verweist 🎜 >Keine Änderung, der Browser verwendet direkt den lokalen Cache. In diesem Fall wird die Seite normal angezeigt, aber wenn Benutzer ohne lokalen Cache oder abgelaufenem Cache die Website besuchen, wird die alte Versionsseite die neue Versionsressource laden Wenn die Seite jedoch bereitgestellt wird, kehren diese Benutzer zum Normalzustand zurück, wenn sie die Seite erneut besuchen.

Okay, was ich aus der obigen Analyse sagen möchte, ist: Niemand kann zuerst bereitstellen! Dies führt während des Bereitstellungsprozesses zu Seitenverwirrung. Daher können F&E-Studenten bei Projekten mit geringem Datenverkehr hart arbeiten und mitten in der Nacht heimlich online gehen. Laden Sie zuerst statische

Ressourcen hoch und stellen Sie dann die Seite bereit. Es scheint, als gäbe es weniger Probleme.

Wie kann man diese Probleme lösen?

Dieses Problem entsteht durch die Overlay-Freigabe von Ressourcen. Dieses Problem tritt auf, wenn freigegebene Ressourcen zur Abdeckung veröffentlichter Ressourcen verwendet werden. Es ist einfach, das Problem zu lösen, d. h. die Veröffentlichung ohne Abdeckung zu implementieren

Es gibt so viele Aspekte zum Caching. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So implementieren Sie Karussellcode für digitale Fokusdiagramme in HTML

In HTML Wie man mit der unvollständigen Anzeige der letzten Textzeile umgeht

So verwenden Sie die Leinwand, um einen Partikelfontänen-Animationseffekt zu erstellen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Front-End-Browser-Cache. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!