HTML-Einstellungscache

Mit der Entwicklung von Webanwendungen werden immer mehr Daten und Dateien in die Seiten eingebunden. Bei einigen wiederverwendeten Daten und Dateien kann der Caching-Mechanismus des Browsers Netzwerkanfragen effektiv reduzieren und die Geschwindigkeit erhöhen, mit der Benutzer auf Seiten zugreifen. Das Festlegen des Caches in HTML ist eine einfache und effektive Möglichkeit. Lassen Sie uns vorstellen, wie Sie den Cache in HTML festlegen.

1. Warum Cache einrichten?

Beim Surfen im Internet löst jeder Seitenaufruf eine Netzwerkanfrage aus, einschließlich Anfragen nach HTML, CSS, JavaScript und anderen Dateien sowie Bildern, Videos und anderen Ressourcen. Die für Netzwerkanfragen erforderliche Zeit ist oft der Engpass bei der Seitenladegeschwindigkeit. Daher ist die Reduzierung der Anzahl der Anfragen entscheidend für die Verbesserung der Seitenladegeschwindigkeit.

Zu diesem Zeitpunkt muss der Caching-Mechanismus des Browsers ins Spiel kommen. Wenn ein Benutzer zum ersten Mal eine Seite anfordert, speichert der Browser die Ressourcen auf der Seite (z. B. CSS, JavaScript und andere Dateien) zwischen. Wenn der Benutzer die Seite erneut besucht, kann der Browser diese Ressourcen direkt aus dem Cache abrufen, ohne eine neue Anfrage initiieren zu müssen. Dies reduziert nicht nur die Belastung des Servers, sondern verbessert auch die Zugriffsgeschwindigkeit der Benutzer erheblich.

2. Wie stelle ich den Cache in HTML ein?

Sie können HTTP-Header in HTML verwenden, um zu steuern, wie Caching verwendet wird. Zu den häufig verwendeten HTTP-Headern gehören Expires und Cache-Control.

1. Expires

Expires gibt ein Datum oder eine Uhrzeit an, vor der der Browser die Ressource als gültig betrachtet. Wenn nach diesem Datum oder dieser Uhrzeit erneut auf die Ressource zugegriffen wird, fordert der Browser die Ressource erneut an.

Auf der Serverseite kann Browser-Caching erreicht werden, indem Expires in Antwortheadern festgelegt werden. Stellen Sie zum Beispiel „Expires“ auf „Ab jetzt 30 Tage“ ein:

Expires: Fri, 16 Jul 2021 20:00:00 GMT

2. Cache-Control

Cache-Control ist einer der moderneren HTTP-Header, die das Caching steuern. Durch Cache-Control können wir die Cache-Strategie genau steuern.

Häufig verwendete Cache-Kontrollattribute sind:

• öffentlich: Der Cache kann von allen Benutzern (einschließlich Proxyservern) zwischengespeichert werden;
• privat: Der Cache kann nur von Endbenutzern zwischengespeichert werden, und zwischengeschaltete Proxyserver können nicht zwischenspeichern;
• max- Alter: Legen Sie die Cache-Ablaufzeit in Sekunden fest. 🎞 Wenn der Browser eine Ressource anfordert, gibt der Server den ETag-Wert der Ressource an den Browser zurück. Wenn die Ressource das nächste Mal angefordert wird, sendet der Browser den vorherigen ETag-Wert über If-None-Match an den Server, um zu fragen, ob sich die Ressource geändert hat.

Wenn sich die Ressource nicht geändert hat, gibt der Server eine 304 Not Modified-Antwort zurück und fügt das ETag in die Antwortheader ein. Wenn sich die Ressource geändert hat, gibt der Server die neue Ressource zurück und aktualisiert das ETag.

Auf der Serverseite kann Browser-Caching erreicht werden, indem das ETag in den Antwortheadern festgelegt wird. Zum Beispiel:

Cache-Control: public, max-age=604800

3. 3. Was Sie beim Einrichten des Caches beachten sollten

Bei der Verwendung des Caches müssen Sie auch die folgenden Punkte beachten.

Vermeiden Sie das Zwischenspeichern privater Informationen.

Wenn der Cache das öffentliche Attribut festlegt, können alle Benutzer auf den zwischengespeicherten Inhalt zugreifen, einschließlich Browser-Caches und Proxy-Server-Caches. Daher ist es notwendig, das Zwischenspeichern privater Informationen (wie Benutzerkennwörter usw.) zu vermeiden.

Sie sollten erwägen, beim Aktualisieren des Caches eine Aktualisierung zu erzwingen.

1. Wenn sich der Seiteninhalt ändert, muss der Browser-Cache des Benutzers aktualisiert werden. Zu diesem Zeitpunkt können Sie das Max-Age-Attribut von Cache-Control verwenden, um die Cache-Gültigkeitszeit in Sekunden festzulegen.

Zum Beispiel kann die Einstellung von Cache-Control auf max-age=0 den Browser dazu zwingen, Ressourcen erneut anzufordern und den Cache zu aktualisieren:

ETag: "1234"

Unterschiedliche Ressourcen sollten unterschiedliche Caching-Strategien festlegen

Für die meisten statischen Ressourcen (wie z Bilder, CSS, JS usw.) können Sie max-age auf einen längeren Zeitraum einstellen, um die Betriebseffizienz zu verbessern. Für einige dynamische Ressourcen, die sich häufig ändern, sollten Mechanismen wie ETag verwendet werden, um sicherzustellen, dass die Ressource bei jeder Anforderung aktualisiert wird.

Zusammenfassung:

Das Festlegen des Caches in HTML ist eine der gängigen Methoden zur Verbesserung der Seitenleistung. Durch das Festlegen von HTTP-Headern wie Expires, Cache-Control und ETag kann der Caching-Mechanismus des Browsers implementiert und die Zugriffsgeschwindigkeit des Benutzers verbessert werden. Beim Einrichten eines Caches müssen Sie auf die detaillierten Einstellungen des Caches und die unterschiedlichen Caching-Strategien für verschiedene Ressourcen achten, um die besten Ergebnisse zu erzielen.

Das obige ist der detaillierte Inhalt vonHTML-Einstellungscache. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!