Der Browser speichert die relevanten HTTP-Header im Cache, um die Anzahl der HTTP-Anfragen zu minimieren
|
Ich habe vor Kurzem die 34 goldenen Regeln von Yahoo gelesen und gelernt, wie man die Leistung einer Website optimiert. Eine davon lautet: „Geben Sie Expires oder Cache-Control für Dateiheader an“. Konkret gilt für statische Inhalte: Setzen Sie den Wert für die Ablaufzeit des Dateiheaders Expires auf „Niemals ablaufen“; und für dynamische Inhalte: Verwenden Sie den entsprechenden Cache-Control-Dateiheader, um dem Browser bei bedingten Anfragen zu helfen. Dies kann mit dem ersten der 34 Punkte von Yahoo verknüpft werden, nämlich der Minimierung der Anzahl von HTTP-Anfragen (viele der 34 Punkte von Yahoo zielen auf die Reduzierung von HTTP-Anfragen ab). Wenn zu viele Ressourcen heruntergeladen werden müssen, kann die Zeit, die zum Hinzufügen neuer HTTP-Links aufgewendet wird, nicht ignoriert werden. Daher kann die Caching-Technologie verwendet werden, um die Leistung der Website zu optimieren und unnötige HTTP-Anfragen zu vermeiden. Es reicht aus, die browserbezogene Caching-Technologie und die cachebezogenen HTTP-Header zu sortieren: 1.Läuft ab: Das Expires-Attribut im HTTP-Header ist das grundlegende Mittel zur Steuerung des HTTP-Cache und teilt dem Browser mit, wie lange der Cache gespeichert werden soll. Nach dieser Zeit sendet der Cache eine Anfrage an den Ursprungsserver, um zu prüfen, ob das Dokument geändert wurde. Es eignet sich zum Einstellen statischer Bilddateien usw. und ist auch nützlich, um Webseiten zu steuern, die sich regelmäßig ändern, z. B. zum Einstellen fester Intervalle für Aktualisierungen usw. Wenn der Dateiheader „Expires“ verwendet wird, muss der Name der Inhaltsdatei geändert werden, wenn sich der Seiteninhalt ändert. Yahoo verwendet beispielsweise häufig dieses Verfahren: Dem Namen der Inhaltsdatei wird eine Versionsnummer hinzugefügt, etwa yahoo_2.0.6.js, damit diese automatisch aktualisiert werden kann. Verwenden Sie „expires“: Wenn Sie einen Apache-Server verwenden, können Sie „ExpiresDefault“ verwenden, um die Ablaufzeit relativ zum aktuellen Datum festzulegen. Verwenden Sie „mod_expires“ und fügen Sie es in httpd.conf oder .htaccess ein. Code kopieren Der Code lautet wie folgt:<FilesMatch "\\.(ico|gif|jpg|html)$">ExpiresDefault "Zugriff plus 10 Jahre"</FileMatch> 2.Cache-Steuerung Die Anweisungen in den einzelnen Nachrichten haben folgende Bedeutung: 1. Öffentlich gibt an, dass die Antwort von jedem Cache zwischengespeichert werden kann; 2. Privat bedeutet, dass die gesamte oder teilweise Antwortnachricht für einen einzelnen Benutzer nicht vom gemeinsam genutzten Cache verarbeitet werden kann. Dadurch kann der Server dem aktuellen Benutzer nur einen Teil der Antwortnachricht beschreiben, ohne dass diese Antwortnachricht für Anfragen anderer Benutzer gültig ist. 3.no-cache zeigt an, dass die Anforderungs- oder Antwortnachricht nicht zwischengespeichert werden kann; 4.no-store wird verwendet, um die versehentliche Veröffentlichung wichtiger Informationen zu verhindern. Das Senden in einer Anforderungsnachricht führt dazu, dass weder die Anforderungs- noch die Antwortnachrichten den Cache verwenden. 5.max-age gibt an, dass der Client Antworten mit einer Lebensdauer von nicht mehr als der angegebenen Zeit (in Sekunden) empfangen kann. 6.min-fresh gibt an, dass der Client eine Antwort empfangen kann, deren Antwortzeit kürzer ist als die aktuelle Zeit plus die angegebene Zeit. 7. max-stale gibt an, dass der Client auch nach Ablauf der Timeout-Zeit noch Antwortnachrichten empfangen kann. Wenn Sie einen Wert für die maximale Anzahl veralteter Nachrichten angeben, kann der Client Antwortnachrichten empfangen, die den angegebenen Timeout-Wert überschreiten. Beispiel: Im Allgemeinen sollten solche statischen Dateien niemals ablaufen. Wenn ich diesem Cache wirklich ein Zeitlimit hinzufügen möchte, hoffe ich, dass es 10.000 Jahre sind Das heißt: „Cache-Control: max-age = 315360000000“ 3. Zuletzt geändert/Wenn geändert seit Das Frage-und-Antwort-Modell fragt Sie, ob Sie das System aktualisiert haben, und antwortet Ihnen dann. Es ist sehr leicht zu verstehen. 4. ETag konfigurieren Entity-Tags (ETags) sind ein Mechanismus, mit dem Webserver und Browser feststellen, ob der Inhalt im Browser-Cache mit dem Originalinhalt auf dem Server übereinstimmt („Entity“ ist der sogenannte „Inhalt“, einschließlich Bilder, Skripte, Stylesheets usw.). Durch das Hinzufügen von ETags wird ein flexiblerer Mechanismus zur Validierung von Entitäten bereitgestellt als durch die Verwendung des Datums der letzten Änderung. Etag ist eine eindeutige Zeichenfolge, die die Versionsnummer des Inhalts identifiziert. Die einzige Formateinschränkung besteht darin, dass es in Anführungszeichen eingeschlossen werden muss. Der Ursprungsserver gibt den ETag des Seiteninhalts durch die Antwort an, die den ETag-Dateikopf enthält. Zum Beispiel: HTTP/1.1 200 OK Letzte Änderung: Dienstag, 12. Dezember 2006, 03:03:59 GMT ETag: "10c24bc-4ab-457e1c1f" Inhaltslänge: 12195 Wenn der Browser später eine Datei validieren möchte, verwendet er den If-None-Match-Header, um den ETag an den Ursprungsserver zurückzugeben. Wenn in diesem Beispiel der ETag übereinstimmt, wird ein Statuscode 304 zurückgegeben, wodurch 12.195 Byte Antwort eingespart werden. GET /i/yahoo.gif HTTP/1.1 Gastgeber: us.yimg.com If-Modified-Since: Dienstag, 12. Dezember 2006, 03:03:59 GMT Wenn keine Übereinstimmung: "10c24bc-4ab-457e1c1f" HTTP/1.1 304 Nicht geändert Zur Priorität der oben genannten Cache-Mechanismen habe ich im Internet eine Aussage gefunden: kein Cache>Läuft ab>Zuletzt geändert Mit anderen Worten, der erste Punkt ist der wichtigste. Sobald der erste Punkt in Kraft tritt, wird der zweite grundsätzlich ungültig. |
<<: Lösung für die Ineffektivität der flexiblen Layoutbreite in CSS3
>>: Zusammenfassung der Unterschiede und Verwendung von Plugins und Komponenten in Vue
Artikel empfehlen
Wenn div auf contentEditable=true gesetzt ist, kann der Cursor nach dem Zurücksetzen seines Inhalts nicht positioniert werden
Ich habe kürzlich an einer Kommentarfunktion gear...
jQuery erzielt den Effekt einer Werbung, die nach oben und unten gescrollt wird
In diesem Artikel wird der spezifische Code von j...
Tutorial zur Installation von RabbitMQ mit Yum auf CentOS8
Geben Sie den Ordner /etc/yum.repos.d/ ein Erstel...
Die vollständigen und inkrementellen Daten einer bestimmten MySQL-Tabelle mit der Nachrichtenwarteschlange synchronisieren - Lösung
Inhaltsverzeichnis 1. Ursprüngliche Nachfrage 2. ...
Der Unterschied zwischen ENTRYPOINT und CMD in Dockerfile
Im Lernprogramm zum Docker-System haben wir geler...
So implementieren Sie eine MySQL-Datenbanksicherung in Golang
Hintergrund Navicat ist das beste MySQL-Visualisi...
Tutorial zur Installation und Konfiguration von msmtp und mutt für Raspberry Pi
1. Installieren Sie mutt sudo apt-get install mut...
Detaillierte Erläuterung der Verwendung des MySQL-Vergleichsoperators für reguläre Ausdrücke REGEXP
1. Daten initialisieren Tabelle löschen, wenn `te...
Methode der Iframe-Anpassung im webresponsiven Layout
Problem <br />Bei responsivem Layout sollte...
Detaillierte Erläuterung zum Bereitstellen und Installieren der chinesischen Version von Redash in Docker
1. Installationsanweisungen Im Vergleich zur loka...
So lösen Sie das Problem „Unbekannte Spalte ‚Passwort‘ beim Zurücksetzen des MySQL-Root-Passworts
Als ich nachts meinen MAC einschaltete, stellte i...
So behalten Sie den Inhalt im Container, wenn das Flex-Layout durch untergeordnete Elemente gestreckt wird
Auf Mobilgeräten ist das Flex-Layout sehr nützlic...
Docker - Zusammenfassung von 3 Möglichkeiten zum Ändern von Container-Mount-Verzeichnissen
Methode 1: Ändern Sie die Konfigurationsdatei (Si...
Die Verwendung und der Unterschied zwischen vue3 watch und watchEffect
1. Hörer ansehen Vorstellung der Uhr importiere {...
Fehlerbehebung bei der Ursache des 502 Bad Gateway-Fehlers auf dem Nginx-Server
Der Server meldet einen Fehler 502 beim Synchroni...