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

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

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

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

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

$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

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

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

Wie kann man diese Probleme lösen?

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!