Кэширование браузера: стратегии и инвалидация

Прямой ответ

Кэширование браузера сокращает число запросов и объём передачи, поскольку ресурсы получаются из локального хранилища. Поведение определяется заголовками ответа и способом именования файлов.

# Файлы с версией в имени кэшируются надолго
location ~* \.(js|css|woff2|webp)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
}

# Документ проверяется при каждом запросе
location = /index.html {
    add_header Cache-Control "no-cache";
}

Версия в имени файла позволяет кэшировать ресурс надолго, поскольку изменение содержимого меняет имя. О заголовках кэширования — в статье про HTTP-кэширование.

Версионирование файлов и инвалидация кэша

Два механизма обеспечивают обновление кэшируемых ресурсов без ожидания истечения срока.

Версия в имени файла. Содержимое файла изменяется — имя изменяется, поэтому браузер запрашивает новый ресурс. Прежняя версия остаётся в кэше, но не запрашивается.

Инвалидация документа. Документ, ссылающийся на ресурсы, не кэшируется надолго, поэтому изменение перечня ресурсов обнаруживается при следующем запросе.

Практическое следствие: длительность кэширования определяется способом именования. Ресурс без версии в имени не кэшируется надолго, поскольку изменение содержимого не меняет имя.

Отдельный аспект — проверка без повторной передачи. Заголовок с меткой либо временем изменения позволяет браузеру запросить подтверждение актуальности, поэтому ресурс передаётся только при изменении.

Три признака некорректного кэширования.

Длительное кэширование ресурса без версии. Изменение содержимого не обнаруживается, поэтому пользователь получает устаревший ресурс.

Отсутствие кэширования для стабильных ресурсов. Ресурс запрашивается при каждой загрузке страницы, хотя содержимое не изменяется.

Кэширование документа надолго. Изменение перечня ресурсов не обнаруживается, поэтому страница ссылается на устаревшие файлы.

О влиянии объёма ресурсов на повторные загрузки — в статье про размер бандла; о настройке заголовков в прокси — в статье про reverse proxy.

Проверка фактического поведения выполняется по статусу ответа: ресурс из кэша возвращается без передачи содержимого.

Проверка актуальности без повторной передачи

Ресурс без версии в имени проверяется на актуальность, поэтому содержимое передаётся только при изменении.

Метка содержимого. Сервер возвращает метку, браузер отправляет её при следующем запросе, поэтому сервер подтверждает актуальность либо передаёт новое содержимое.

Время изменения. Сервер возвращает время последнего изменения, браузер отправляет его при следующем запросе, поэтому подтверждение выполняется без передачи содержимого.

Практическое следствие: проверка сокращает объём передачи для ресурсов, которые изменяются редко, но не исключает запрос полностью.

Практика: настройка кэширования браузера

1. Используйте версию в имени для собираемых ресурсов. Изменение содержимого меняет имя, поэтому ресурс кэшируется надолго.

2. Кэшируйте документ коротко либо с проверкой. Изменение перечня ресурсов должно обнаруживаться при следующем запросе.

3. Указывайте неизменяемость для версионированных файлов. Браузер не выполняет проверку актуальности в течение срока.

4. Применяйте проверку для ресурсов без версии. Метка либо время изменения позволяют подтвердить актуальность без повторной передачи.

5. Проверяйте фактическое поведение. Ресурс из кэша возвращается без передачи содержимого, поэтому статус ответа показывает источник.

6. Не кэшируйте надолго ресурсы, изменяемые без смены имени. Пользователь получает устаревший ресурс до истечения срока.

7. Пересматривайте стратегию при изменении способа именования. Изменение правила именования делает прежнюю длительность кэширования некорректной.

Рекомендации:

1. Различайте кэширование и проверку. Кэширование исключает запрос, проверка подтверждает актуальность без передачи содержимого.
2. Учитывайте срок кэширования документа. Документ, ссылающийся на ресурсы, не кэшируется надолго, иначе изменения не обнаруживаются.
3. Проверяйте поведение после обновления. Пользователь должен получить новую версию ресурса без ручных действий.
4. Фиксируйте правила кэширования в конфигурации. Изменение правил влияет на поведение всех ресурсов, поэтому задаётся явно.
5. Пересматривайте при изменении состава ресурсов. Новый тип ресурса требует определения стратегии кэширования.

Практический сценарий: пользователи получали устаревшую версию страницы

Контекст: после обновления часть пользователей продолжала видеть прежнюю версию страницы.

1. Диагностика. Файлы стилей и скриптов кэшировались надолго, при этом имена файлов не изменялись при обновлении. Браузер использовал кэшированную версию, поскольку срок кэширования не истёк.
2. Причина. Длительное кэширование применено к ресурсам без версии в имени. Изменение содержимого не меняло имя, поэтому браузер не запрашивал новую версию.
3. Действия. (а) Включили версионирование имён файлов при сборке, чтобы изменение содержимого меняло имя; (б) установили длительное кэширование с признаком неизменяемости для версионированных файлов; (в) сократили кэширование документа, чтобы изменение перечня ресурсов обнаруживалось; (г) проверили получение новой версии после обновления без ручных действий; (д) зафиксировали правила кэширования в конфигурации сервера.
4. Результат. Пользователи получают новую версию при следующем запросе документа, поскольку имена ресурсов изменяются.

Вывод: длительное кэширование ресурсов без версии в имени приводит к получению устаревленной версии. Версионирование имён позволяет кэшировать надолго и обновлять ресурсы одновременно с документом.

FAQ

Как долго кэшировать ресурсы? Версионированные файлы — надолго с признаком неизменяемости, поскольку изменение содержимого меняет имя. Документ — коротко либо с проверкой.

Зачем нужна версия в имени файла? Изменение содержимого меняет имя, поэтому браузер запрашивает новый ресурс. Прежняя версия остаётся в кэше, но не запрашивается.

Можно ли кэшировать документ надолго? Нет, изменение перечня ресурсов не обнаружится, поэтому страница будет ссылаться на устаревшие файлы.

Как проверить, что ресурс получен из кэша? По статусу ответа: ресурс из кэша возвращается без передачи содержимого, поэтому объём передачи отсутствует.

Источники: MDN HTTP Caching, nginx headers, MDN Cache-Control — ссылки в шапке.