Наконец-то настроил у себя на сайте кеширование. Вот что вам нужно знать, если вы тоже хотите.
ЗаголовкиЕсть 4 заголовка, которые включают кеширование:
Cache-Control
/
Expires
и
Last-Modified
/
ETag
. Первые два — основные; они включают кеширование и говорят браузеру, сколько времени хранить ресурс. Вторые два — дополнительные; они нужны, когда срок кеширования истёк, и помогают проверить, изменился ли файл (если нет, то браузер просто берёт старый ресурс и продолжает использовать его дальше).
На практике из этого всего вы выбираете один основной заголовок, один дополнительный и используете их вместе. Использовать все 4 нет смысла — браузер всё равно выберет только два из них.
Я рекомендую использовать
Cache-Control
+
ETag
.
Cache-Control
даёт возможность настраивать полезные штуки, которые не настроить с
Expires
.
ETag
, согласно MDN,
более надёжный, чем
Last-Modified
.
Жизненный циклЕсли у нас есть картинка pic.jpg, то её обычный жизненный цикл будет таким:
1. Браузер посылает запрос за pic.jpg. Сервер отдаёт файл с заголовками, например,
Cache-Control: max-age=60
,
ETag: deadbeef123
.
↓
2. Пользователь обновляет страницу. Если прошло меньше 60 секунд (60 — значение из
Cache-Control: max-age
), браузер НЕ делает запрос за pic.jpg, а просто берёт ресурс из кеша и использует его.
↓
3. Пользователь обновляет страницу. Если 60 секунд прошло (60 — значение из
Cache-Control: max-age
), картинка в кеше становится невалидной. Браузер снова делает запрос за pic.jpg и прикрепляет туда заголовок
If-None-Match: deadbeef123
(
deadbeef123
— значение из
ETag
, которое браузер получил на первом этапе).
Когда сервер получает запрос, он читает файл и вычисляет для него
ETag
.
ETag
— это хеш, который меняется, если меняется файл. А дальше:
— если etag остаётся
deadbeef123
, сервер возвращает пустой ответ со статусом
304 Not Modified
— если etag оказывается другим (это значит, что файл изменился), сервер возвращает картинку со статусом
200 OK
и свежими заголовками
Cache-Control
и
ETag