Um Ihre Frage zu beantworten, warum das Caching funktioniert, obwohl der Webserver die Header nicht enthielt:
- Läuft ab:
[a date]
- Cache-Kontrolle: maximales Alter =
[seconds]
Der Server hat alle Zwischenproxys gebeten, den Inhalt nicht zwischenzuspeichern (dh das Element sollte nur in einem privaten Cache zwischengespeichert werden, dh nur auf Ihrem eigenen lokalen Computer):
Der Server hat jedoch vergessen, Caching-Hinweise anzugeben:
- Sie haben vergessen, Expires einzuschließen , sodass der Browser die zwischengespeicherte Kopie bis zu diesem Datum verwenden kann
- Sie haben vergessen, Max-Age einzuschließen , damit der Browser weiß, wie lange das zwischengespeicherte Element gültig ist
- Sie haben vergessen, E-Tag einzuschließen , damit der Browser eine bedingte Anforderung ausführen kann
Die Antwort enthielt jedoch ein Datum der letzten Änderung :
Last-Modified: Tue, 16 Oct 2012 03:13:38 GMT
Da der Browser das Datum kennt, an dem die Datei geändert wurde, kann er eine bedingte Anforderung ausführen . Der Server wird nach der Datei gefragt, der Server wird jedoch angewiesen, die Datei nur zu senden, wenn sie seit dem 16.10.2012 um 3:13:38 Uhr geändert wurde:
GET / HTTP/1.1
If-Modified-Since: Tue, 16 Oct 2012 03:13:38 GMT
Der Server empfängt die Anfrage und stellt fest, dass der Client bereits über die neueste Version verfügt. Anstatt den Client zu senden 200 OK
, gefolgt vom Inhalt der Seite, wird Ihnen stattdessen mitgeteilt, dass Ihre zwischengespeicherte Version gut ist:
304 Not Modified
Ihr Browser musste die Verzögerung beim Senden einer Anfrage an den Server erleiden und auf eine Antwort warten, ersparte jedoch das erneute Herunterladen des statischen Inhalts.
Warum Max-Age ? Warum läuft ab ?
Weil Last-Modified scheiße ist.
Nicht allem auf dem Server ist ein Datum zugeordnet. Wenn ich eine Seite im laufenden Betrieb erstelle, ist kein Datum damit verbunden - es ist jetzt . Aber ich bin durchaus bereit, den Benutzer die Homepage 15 Sekunden lang zwischenspeichern zu lassen:
200 OK
Cache-Control: max-age=15
Wenn der Benutzer hämmert F5, erhält er 15 Sekunden lang die zwischengespeicherte Version. Wenn es sich um einen Unternehmens-Proxy handelt, erhalten alle 67198 Benutzer, die dieselbe Seite im selben 15-Sekunden-Fenster aufrufen, denselben Inhalt - alle werden aus dem geschlossenen Cache bereitgestellt. Leistungsgewinn für alle.
Der Vorteil des Hinzufügens Cache-Control: max-age
besteht darin, dass der Browser nicht einmal eine bedingte Anforderung ausführen muss .
- Wenn Sie nur angegeben haben
Last-Modified
, muss der Browser eine Anforderung ausführen If-Modified-Since
und auf eine 304 Not Modified
Antwort achten
- Wenn Sie angegeben haben
max-age
, muss der Browser nicht einmal den Netzwerk-Roundtrip erleiden. Der Inhalt kommt direkt aus den Caches
Der Unterschied zwischen "Cache-Control: max-age" und "Expires"
Expires
ist ein Legacy-Äquivalent des modernen Cache-Control: max-age
Headers (ca. 1998) :
Expires
: Sie geben ein Datum an (yuck)
max-age
: Sie geben Sekunden an (Güte)
Und wenn beide angegeben sind, verwendet der Browser max-age
:
200 OK
Cache-Control: max-age=60
Expires: 20180403T192837
Jede Website, die nach 1998 geschrieben wurde, sollte nicht Expires
mehr verwendet werden und stattdessen verwendet werden max-age
.
Was ist ETag?
ETag ähnelt Last-Modified , nur dass es kein Datum sein muss - es muss nur etwas sein .
Wenn ich eine Liste von Produkten aus einer Datenbank ziehe, kann der Server die letzte rowversion
als ETag und nicht als Datum senden :
200 OK
ETag: "247986"
Mein ETag kann der SHA1-Hash einer statischen Ressource (z. B. Bild, JS, CSS, Schriftart) oder der zwischengespeicherten gerenderten Seite sein (dh das ist, was das Mozilla MDN-Wiki tut; sie haben das endgültige Markup):
200 OK
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
Und genau wie bei einer bedingten Anforderung basierend auf Last-Modified :
GET / HTTP/1.1
If-Modified-Since: Tue, 16 Oct 2012 03:13:38 GMT
304 Not Modified
Ich kann eine bedingte Anforderung basierend auf dem ETag ausführen :
GET / HTTP/1.1
If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"
304 Not Modified
An ETag
ist überlegen, Last-Modified
weil es für andere Dinge als Dateien oder für Dinge mit Datumsbegriff funktioniert . Es ist einfach so