Einführung in das HTTP-Caching
Ich bin sicher, Sie haben bemerkt, dass das Laden einer Website beim ersten Öffnen einige Zeit in Anspruch nimmt. Wenn Sie es jedoch nach einiger Zeit wieder öffnen, wird die Site viel schneller geöffnet. Stellen Sie sich vor, eine Site würde jedes Mal dieselbe Zeit zum Laden benötigen, wie langsam sich das Surfen anfühlen würde. Nun, das ist alles dank einer raffinierten Idee namens HTTP-Caching. Werfen wir einen Blick darauf, was es ist, wie es funktioniert und wie es verwendet wird, um das Surfen im Internet zu einer schnelleren Erfahrung zu machen.
Was ist HTTP-Caching?
HTTP-Caching ist die Idee, einige häufig oder häufig verwendete Daten an einem Ort zu speichern, auf den schnell zugegriffen werden kann. Auf diese Weise besteht eine sehr gute Chance, dass auf die am meisten benötigten Daten viel schneller zugegriffen werden kann, da der Computer nicht zu weit reichen muss, um sie abzurufen.
Beim Browsen im Internet wird das Zwischenspeichern berücksichtigt, wenn Ihr Webbrowser wie Chrome eine Kopie einer Website oder einer Web-App im lokalen Speicher speichert. Sobald eine Website zwischengespeichert wurde, muss ein Webbrowser nicht mehr alle Daten vom Server herunterladen, was das Surfen erheblich beschleunigt.
Beispielsweise muss eine heruntergeladene CSS-Datei einer Website nicht für jede Seite der Sitzung von einem Browser heruntergeladen werden. Das Gleiche gilt für viele JavaScript-Dateien, Bilder (wie das Logo der Website und Social Media-Symbole) und sogar für einige dynamische Inhalte. Das Caching wird mithilfe von Cache-Headern aktiviert.
Überschriften in HTTP zwischenspeichern
HTTP-Caching hat zwei Haupt-Cache-Header, der erste heißt "Cache-Control" und der zweite heißt "Expire". Werfen wir einen Blick auf beide:
Cache-Kontrolle
Sie können Cache-Control als einen Schalter betrachten, um das Caching im Benutzerbrowser zu aktivieren. Sobald dieser Header hinzugefügt wurde, wird das Caching für alle unterstützten Webbrowser aktiviert. Wenn dieser Header nicht vorhanden ist, speichert kein Browser den Inhalt der Webseite im Cache, auch wenn er das Cachen unterstützt.
Das Cache-Steuerelement verfügt über zwei Arten von Datenschutzeinstellungen: die erste ist öffentlich und die zweite ist privat.
Im Fall von "Öffentlich" können die Ressourcen von einem beliebigen zwischengeschalteten Proxy zwischengespeichert werden, beispielsweise von Content Delivery Networks (CDN).
Ein Cache-Control-Header mit einer privaten Antwort teilt dem Browser mit, dass die Zwischenspeicherung nur für einen einzelnen Benutzer und nicht für einen zwischengeschalteten Proxy durchgeführt wird.
Der Wert "max-age" im Cache-Control-Header legt die Zeit fest, für die der Inhalt zwischengespeichert wird. Diese Zeit ist in Sekunden.
Cache-Control:public, max-age=31536000
Läuft ab
Der Expires-Header wird verwendet, wenn Cache-Control im Code vorhanden ist. Dies ist ein einfacher HTTP-Cache-Header, der ein Datum festlegt, ab dem eine Cache-Ressource als ungültig eingestuft wird. Sobald der Cache abgelaufen ist und der Benutzer die Website lädt, fordert ein Webbrowser einfach den gesamten Inhalt der Seite erneut an.
Bedingte Anfragen
Die oben beschriebenen Header teilen dem Browser einfach mit, wann er die Daten vom Webserver abrufen soll. Bedingte Anforderungen teilen dem Browser andererseits mit, wie er sie abrufen soll. Bedingte Anforderungen teilen einem Browser mit, wie er den Server fragen kann, ob die Kopie der Daten im Cache veraltet ist.
In diesem Prozess sendet der Browser einige Daten zu Ressourcen, die er in seinem Speicher zwischengespeichert hat, und nach dem Lesen dieser Daten entscheidet der Server, ob die Daten veraltet sind oder nicht.
Zeitbasierte Anfragen
Bei zeitbasierten Anfragen wird geprüft, ob die angeforderte Ressource auf dem Server geändert wurde oder nicht. Wenn die zwischengespeicherte Kopie im Browser die neueste ist, gibt der Server den Code 304 zurück.
Um die bedingte Anforderung auf Zeitbasis festzulegen, können Sie im Antwortheader "Zuletzt geändert" verwenden.
Cache-Control:public, max-age=25998579
Last-Modified: Fri, 08 Jul 2018 15:25:00 GMT
Inhaltsbasiert
In inhaltsbasierten Anforderungen wird der MD5-Hash (oder eine andere realisierbare Option) sowohl auf Serverkopie als auch auf Cache-Kopie überprüft. Dies zeigt an, ob die Daten identisch sind oder nicht. Wenn sich die Daten unterscheiden, stimmt die MD5-Prüfsumme nicht überein und der Server sendet eine neue Kopie der Ressourcen.
Dies geschieht über „ETag“ in der Kopfzeile. Der Wert davon ist die Zusammenfassung der Ressourcen.
Cache-Control:public, max-age=25998579
ETag: "496d7131f15f0fff99ed5aae”
Sichtweite
Fast alle modernen Browser enthalten einige entwicklungsbezogene Tools, mit denen Sie Ressourcen, Quellcode und andere Aspekte einer Webseite überprüfen können. Darunter finden Sie ein Tool, mit dem Sie die von jeder Anwendung zurückgegebenen Header anzeigen können.
Um diese Überschriften in Google Chrome anzuzeigen, können Sie mit der rechten Maustaste auf einen leeren Bereich einer Webseite klicken und auf "Überprüfen" klicken oder STRG + UMSCHALT + I drücken, um DevTools zu öffnen. Klicken Sie in diesem Tool auf die Registerkarte "Netzwerk" und drücken Sie STRG + R, um neu zu laden und alle Überschriften der Seite anzuzeigen.
Anwendungsfälle beim HTTP-Caching
Im Folgenden sind einige Verwendungsfälle von HTTP-Caching aufgeführt:
Für statische Assets
Für statische Elemente einer Seite wie Bilder, JS-Dateien und beliebige CSS-Dateien können Sie festlegen, dass der Inhalt aggressiv zwischengespeichert wird. Das Nichtladen dieser Dateien führt zu einer beeindruckenden Leistungsverbesserung. Wählen Sie für diesen Anwendungsfall den Cache-Control-Header mit einem Höchstalter von mehr als einem Monat oder sogar einem Jahr.
Cache-Control:public; max-age=31536000
Für dynamische Inhalte
Bei dynamischen Inhalten einer Seite müssen Sie sich überlegen, welche Dateien der Browser wie lange zwischenspeichern soll. Falls der Inhalt häufig geändert wird, müssen Sie sicherstellen, dass die Zeitdauer, die Sie für das Zwischenspeichern auswählen, für den Benutzer kein Problem darstellt.
Zwischenspeichern von privaten Inhalten
Wie im Abschnitt Cache-Control erläutert, können Sie verhindern, dass der Inhalt der Seite von zwischengeschalteten Proxys, z. B. CDNs, zwischengespeichert wird, indem Sie im Header "Cache-Control: private" hinzufügen.
Ein weiterer sicherer Ansatz besteht darin, keine privaten Inhalte zwischenzuspeichern.
HTTP-Caching implementieren
Nachdem Sie wissen, was HTTP-Caching ist und wie es funktioniert, schauen wir uns an, wie Sie es auf Ihrer Website implementieren können. Die Implementierung von HTTP-Caching ist für verschiedene Servertypen etwas unterschiedlich. In unserem Fall werfen wir einen Blick auf die Implementierung des Cachings über die .htaccess-Datei.
Um das Caching vor Ort zu aktivieren, können Sie die Header in der .htaccess-Datei auf Ihrem Server hinzufügen. Beispiel:
FilesMatch "\.(ico|pdf|flv|jpg.webp|jpeg.webp|png|gif|js|css|swf)$"
Header set Cache-Control "max-age=31536000, public"
/FilesMatch
Die oben genannten Daten werden für ein Jahr in PDF-, FLV-, JPG.webp- und anderen im „File Match“ genannten Formaten zwischengespeichert.
Fazit
HTTP-Caching ist einer der wichtigsten Tricks, die das Surfen auf Ihrer Website für Ihre Besucher zu einer schnelleren Erfahrung machen. Jetzt, da Sie sehen können, wie es funktioniert, können Sie es auf Ihren Websites und Web-Apps implementieren, um sie für Ihre Benutzer und Benutzer schneller zu machen zum Sparen Ihrer Serverbandbreite.
Empfohlene Artikel
Dies war eine Anleitung zum HTTP-Caching. Hier haben wir die Implementierung, Bedingte Anforderungen, Cache-Header und Anwendungsfälle von HTTP erörtert. Sie können auch unsere anderen Artikelvorschläge durchgehen, um mehr zu erfahren -
- Erfahren Sie, was HTML ist
- Wie installiere ich Github?
- Was ist MapReduce in Hadoop?
- Leitfaden für Anfänger zu Knotenbefehlen
- HTTP-Cookies | Sicherheit