Jak kontrolować CACHE przeglądarki dla plików CSS i JS?

Załóżmy że na stronie posiadamy 1 plik CSS, który aktualizujemy co miesiąc.

Mając na uwadze naszą częstotliwość aktualizacji warto aby przeglądarka zapamiętała ten plik w swoim cachu i pobrała go tylko wtedy gdy jego zawartość się zmieni, a nie za każdym razem.

Zaznaczam że ustawienia tagów ETag dla serwera Apache są wyłączone i to właśnie przeglądarka będzie odpowiedzialna za kontrolę cachu (zalecane przez YSlow – patrz komentarz na dole) poprzez komunikacje z serwerem. Poniżej ustawienia pliku .htaccess :

Header unset ETag
FileETag none

ExpiresActive On
ExpiresDefault "access plus 4 months"

Negatywnym aspektem tego jest oczywiście fakt że przeglądarka może uznać plik za niezmieniony i nie odświeży jego zawartości dzieki ustawieniom użytkownika! Można tego uniknąć.

Standardowy kod do zewnętrznego pliku CSS:

http://domain.b.c.com/lib/css/styl.css

W tej sytuacji przeglądarka pyta serwera czy plik styl.css się zmienił, dostaje odpowiedź 200 OK więc pobierz go lub nie, 304 plik nie został zmodyfikowany. Teraz zmodyfikujemy trochę ten zapis:

http://domain.b.c.com/lib/css/styl.css?= <--- tu wstawiamy phpowe filemtime(’lib/css/styl.css’)

co zwróci nam uniksowy znacznik czasu:

http://domain.b.c.com/lib/css/styl.css?12124499976

Zauważ, że teraz przeglądarka wyśle zapytanie do serwera o plik o nazwie styl.css?1233211176 a nie styl.css

Dla przeglądarki jest to zupełnie inny plik. Tym sposobem, poprzez doklejanie daty modyfikacji pliku do jego nazwy za pomocą metody GET, oszukamy przeglądarkę i zaoszczędzimy użytkownikom problemów z niepoprawnym wyświetlaniem stylu na stronie.

Aktualizacja
Komentarz przesłany przez Pawła ‘MePhiR’ W.

[W artykule http://skrypta.pl/style-css/jak-kontrolowac-cache-przegladarki-dla-plikow-css-i-js/ jest jeden błąd Yslow, wcale nie nakazuje wyłączenia Etagów, tylko zmiane ich budowy, jest to spowodowane tym, że standardowa budowa zawiera inode, który w systemach wieloserwerowych na każdym serwerze dla jednego pliku może być różny, co powoduje ponowne pobranie danego pliku. Sam Etag ma właśnie wspomagać system cachowania i pomóc przeglądarce okreslić aktualność plików.
Więcej odsyłam do artykułu

http://developer.yahoo.net/blog/archives/2007/07/high_performanc_11.html


Data: cze 27, 2006