Какие механизмы кэширования есть в браузере

Что проверяют

Умеете ли вы управлять кэшем заголовками и выкатывать новую версию так, чтобы у пользователей не осталась старая. Вопросы о кэше обычно растут из реального случая «мы задеплоили, а у клиента старый бандл». Следом спрашивают разницу между no-cache и no-store и что такое ETag.

Как отвечать

Идите по слоям, от сети к приложению:

• HTTP-кэш: главный заголовок Cache-Control. max-age задаёт срок свежести, no-cache разрешает хранить, но требует перепроверки перед каждым использованием, no-store запрещает хранить вообще, private запрещает кэш прокси, immutable убирает перепроверку при перезагрузке, stale-while-revalidate разрешает отдать устаревшее и обновить фоном.
• валидаторы: ETag с If-None-Match и Last-Modified с If-Modified-Since. Если ресурс не изменился, сервер отвечает 304 без тела, трафик экономится, но запрос всё равно происходит;
• где хранится: быстрый memory cache на время жизни вкладки и disk cache на диске. С Chrome 86 HTTP-кэш разделён по сайту верхнего уровня, поэтому библиотека с общего CDN между сайтами больше не переиспользуется;
• bfcache: при переходе назад страница восстанавливается целиком вместе с состоянием JS. Её отключают обработчик unload и заголовок Cache-Control: no-store;
• Service Worker и Cache Storage: программируемый кэш: стратегию (cache first, network first, stale while revalidate) пишете вы, отсюда же офлайн;
• хранилища: localStorage, sessionStorage и IndexedDB это не кэш, у них нет ни срока годности, ни валидации, инвалидацию пишете вы.

Практический вывод: статику с хэшем в имени файла отдавайте с max-age=31536000, immutable, а HTML с no-cache, чтобы новая версия подхватывалась сразу.

Где спотыкаются

Путают no-cache и no-store. Первый разрешает хранение с обязательной перепроверкой, второй запрещает хранить, и разница видна на скорости повторных заходов.

Отдают файлы без хэша в имени с длинным max-age, а потом просят пользователей нажать Ctrl+F5. Инвалидацию решает имя файла, а не просьба.

Вешают долгий max-age на HTML и ответы API. Пользователь неделю видит старую страницу или чужие устаревшие данные.