Как браузер понимает, что нужно закешировать?

Частый вопрос с собесов, который, к тому же, часто может пригодиться и на практике

Кеширование — это способ оптимизации загрузки через хранение копий файлов на вашем устройстве, чтобы ускорить доступ к ним в будущем. Это могут быть HTML, CSS, JS файлы, изображения, шрифты и всё остальное

Некоторые современные браузеры стараются кешировать файлы опираясь на частоту их использования и изменения. То есть, чтобы кеширование хоть как-то начало работать, браузеру необходимо собрать некоторую историю ваших посещений и загрузок ресурсов для открытия сайтов. Сам по себе этот способ не очень надежный, про него мало кто знает и рассчитывают на него достаточно редко

Самый простой способ контролировать кеширование в браузере — это напрямую сказать браузеру что можно кешировать и как долго это можно сделать. Реализуют это обычно через специальные HTTP заголовки Cache-Control и Expires:

Cache-Control заголовок может иметь несколько значений:

• no-cache — браузер проверяет актуальность ресурса на сервере при каждом запросе

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

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

Чаще всего это значение используют с ресурсами, что изменяются часто

• no-store — полностью запрещает хранить ресурс в кеше. Особенно полезно для чувствительных данных, типа истории переводов в банке

• public, max-age=31536000 — пример агрессивного кеширования, где ресурс можно хранить в кеше до одного года (максимальное время max-age указывается в секундах). Например, это может быть применено к логотипу компании, который редко меняется

Также есть ещё один заголовок — Expires. Он указывает точную дату и время, до которого ресурс считается актуальным и может быть использован из кеша без проверки на сервере:

text
1Expires: Wed, 21 Oct 2024 07:28:00 GMT
2
3Этот заголовок говорит браузеру, что ресурс может использоваться
4из кеша до 21 октября 2024 года 07:28:00 по времени GMT
5

Обычно Expires используется реже из-за того, что он работает именно с абсолютными датами. Если ваши серверные часы или время на устройстве пользователя настроены неправильно, это может привести к некорректному кешированию

Если нужно кешировать ресурс по времени, то обычно используют Cache-Control и его параметр max-age, так как в этом случае дата окончания кеширования рассчитывается относительно настроек времени на устройстве пользователя