Es gab viele großartige Kommentare zum Artikel CSS-Caching. Ich habe viel aus diesen Kommentaren gelernt und möchte daher einige Missverständnisse ausräumen und einige der großartigen Tricks hervorheben, die andere geteilt haben.
- Es ist der Browser, der das Caching durchführt, aber der Server kann ein Mitspracherecht haben. Viele Browser fragen den Server zuerst, ob sie die CSS-Datei erneut herunterladen müssen, und der Server antwortet. Manchmal antwortet der Server mit einer 304 (Nicht geändert), die dem Browser mitteilt, dass er seine eigene gecachte Kopie verwenden soll. Anscheinend, wenn Sie Ihr CSS auf dem Server ändern und den Browser fast sofort aktualisieren, hat der Server dies möglicherweise noch nicht mitbekommen und antwortet mit einer 304, und Ihr Browser verwendet seine gecachte Kopie. (Danke Eric)
- Sie können Ihre Servereinstellungen (wenn Sie Apache verwenden) ändern, um CSS-Dateien nach einer Sekunde "ablaufen" zu lassen. Siehe 2. Kommentar. Dies erzielt den gleichen Effekt wie Zeitstempel, da der Browser dem Browser immer mitteilt, dass er die CSS-Datei neu herunterladen soll. (Danke Joshua)
- Wenn Sie eine Versionsverwaltungssoftware verwenden, ist das Hinzufügen von Versionsinformationen am Ende des CSS-Links wahrscheinlich eine klügere Vorgehensweise. (Danke August)
- Anstatt das genaue Datum und die genaue Uhrzeit am Ende des CSS-Links anzuhängen, ist es noch intelligenter, das Datum und die Uhrzeit der letzten Änderung der Datei anzuhängen. Versuchen Sie stattdessen echo filectime(’/path/to/style.css’); Dies gibt ebenfalls einen Zeitstempel zurück und keine "menschenlesbare" Datumsangabe, was die Leerzeichen im URL-Link eliminiert. (Danke... an alle!)
- Denken Sie daran, dass Sie in den meisten Browsern SHIFT-REFRESH drücken können, um sie zum erneuten Herunterladen aller benötigten Dateien zu zwingen. Dies ist auch für Ihre Kunden leicht zu erklären! (Danke Paul)
Beim Wechsel zwischen Seiten einer Website rufen viele Browser die CSS-Datei überhaupt nicht vom Server ab, obwohl die meisten beim Drücken von Refresh eine Anfrage stellen.
Das Anhängen einer Abfragezeichenfolge an die CSS-Datei verhindert, dass der Browser den Cache verwendet. Dies sollte jedoch nicht auf einer Live-Website verwendet werden. Selbst wenn die Abfragezeichenfolge gleich bleibt, rufen einige Browser immer eine frische Kopie vom Server ab. Ich glaube, Opera und Safari tun dies gemäß der HTTP-Spezifikation.
Von ftp://ftp.isi.edu/in-notes/rfc2616.txt
—
Wir stellen eine Ausnahme von dieser Regel fest: Da einige Anwendungen traditionell GETs und HEADs mit Abfrage-URLs (die ein „?“ im rel_path-Teil enthalten) zum Ausführen von Operationen mit erheblichen Nebenwirkungen verwendet haben, DÜRFEN Caches keine Antworten auf solche URIs als frisch behandeln, es sei denn, der Server gibt eine explizite Ablaufzeit an. Dies bedeutet insbesondere, dass Antworten von HTTP/1.0-Servern für solche URIs NICHT aus einem Cache bezogen werden SOLLTEN.
—
Der beste Weg ist, eine weit in die Zukunft reichende Ablaufzeit für CSS-Dateien festzulegen und die URL zu ändern, wenn sich die Daten ändern, ohne eine Abfragezeichenfolge zu verwenden. Sie können dies mit mod_rewrite erreichen oder durch physische Änderung des Dateinamens der CSS-Datei.
css/style1.css
...eine Änderung vornehmen...
css/style2.css
Der eindeutige Teil des Dateinamens könnte ein Zeitstempel des letzten Änderungsdatums der Datei sein, und mod_rewrite würde style\d+.css auf style.css umleiten.
Auf diese Weise erhält der Benutzer immer die neueste Version Ihres CSS, ohne das Caching über Bord zu werfen.
Jake.
Zur Interaktion zwischen Browser und Server: Jake hat Recht, dass der Browser nicht immer den Server nach einem neuen Stylesheet fragt (insbesondere Opera), wenn die Datei einen EXPIRE-Header von -1 oder einem Datum in der Zukunft hat.
Das "Ablaufenlassen" der CSS-Dateien nach einer Sekunde ist eine Möglichkeit, um sicherzustellen, dass das CSS Ihrer Benutzer aktuell ist, und es gibt viele weitere Header wie PRAGMA=no-cache und andere dafür.
Eine der besten Methoden, die ich gefunden habe, ist ein Vorschlag von Yahoo: Setzen Sie einen ETag-Header auf den Dateinamen + die Zeit der Datei. Ich kann Ihnen nicht alle Möglichkeiten nennen, wie Sie Ihren Server dafür konfigurieren können, aber jetzt haben Sie etwas, wonach Sie googeln können, und einen Ausgangspunkt.
Ich hoffe, das hilft! Danke für das Update Chris!
Der Shift-Refresh hat mir den Morgen verschönert. Ich habe schon so lange versucht, einen Weg zu finden, das zu tun!
Für alle Liebhaber von Abkürzungen: CTRL + F5 erzwingt ebenfalls den Download aller Dateien auf einer Webseite.
Ich habe etwas Ähnliches für Javascript-Dateien entwickelt. Kürzlich habe ich meinen Javascript-Aggregator für das "Zend Framework" fertiggestellt, der eine separate Datei pro Kombination von Javascript-Dateien kompiliert.
Wie ist das interessant? Der Identifikator zur Überprüfung, ob eine Kombination bereits kompiliert und zwischengespeichert wurde, ist ein MD5-Checksumme des zusammengesetzten Inhalts aller Dateien. Auf diese Weise ändert sich der Schlüssel, wenn sich der Inhalt einer Datei ändert, und eine neue Datei wird vom Server gesendet, andernfalls wird die Datei nicht erneut angefordert.
Ich versuche derzeit etwas Ähnliches auch für CSS-Dateien, ich werde versuchen, euch auf dem Laufenden zu halten.
Was ich vergessen habe zu erwähnen, ist, dass die MD5-Checksumme der Dateiname ist, der geladen wird, anstatt 5 separater Dateien.
Ganz ehrlich, persönlich neige ich zu der Technik, bei der ich die Dateien umbenenne, so:
jetzt benutze ich nicht einmal mehr die v-Variable im Code, verdammt, ich schaue nicht einmal in die GET-Parameter, um zu prüfen, ob sie überhaupt vorhanden ist. aber der Browser! oh, er denkt, es ist eine ganz neue Dimension, die er erkunden muss, und vergisst das Caching komplett :)
Auf diese Weise wissen Sie auch immer, bei welcher Version der Datei Sie sich befinden. Ich habe einmal eine Engine erstellt, die den Wert für "v" basierend auf Änderungen im Dateisystem manipuliert. Eine Art grundlegendes SVN, da es verlustfrei war. :) Seid gegrüßt alle.