HTTP-кэширование
Вопрос
Как браузер кэширует ресурсы и как это использовать в сборке?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Cache-Control задаёт время жизни и правила хранения
ETag и Last-Modified дают условный запрос с ответом 304
immutable отменяет перепроверку до истечения срока
хэш в имени файла позволяет кэшировать статику навсегда
HTML кэшировать нельзя - он ссылается на новые хэши
no-store запрещает хранить вообще, no-cache требует перепроверки
Что могут спросить следом
- Почему у HTML нельзя ставить длинный max-age
- Чем stale-while-revalidate полезен
- Как service worker меняет эту схему
Разбор
Cache-Control управляет всем: max-age - сколько считать свежим, no-cache -
хранить, но каждый раз перепроверять, no-store - не хранить вовсе. При перепроверке
браузер шлёт If-None-Match с ETag и получает 304 без тела.
Стандартная схема для фронтенда: статика с хэшем в имени (app.4f2c.js) отдаётся
с max-age=31536000, immutable - она никогда не меняется под тем же именем. А HTML
отдаётся с no-cache: он маленький, и именно он приносит ссылки на новые хэши.
Перепутать эти два правила - классика: пользователи неделю сидят на старой версии либо статика перезапрашивается на каждый переход.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.