В этой заметке пойдет речь на тему браузерного кэша и управления им. Для того, чтобы обновить страницу в браузере, многие используют привычную кнопку F5, хотя существует еще и такая комбинация, как Ctrl + F5. Так в чем же здесь отличие?
Для начала нужно знать, что веб-браузер умеет создавать два типа HTTP-запросов — условный и безусловный.
Безусловный запрос делается в том случае, если браузер клиента не имеет сохраненной (локальной) копии ресурса. В этом случае сервер должен вернуть ресурс с ответом HTTP/200 OK. Клиент может кэшировать полученный ресурс, если заголовки ответа позволяют это делать.
Если в дальнейшем браузер обращается к ресурсу, который уже доступен локально (в кэше), то происходит проверка заголовков ресурса, чтобы определить, является ли сохраненная копия актуальной или нет. Если закэшированная копия актуальна, то никакого запроса на сервер не происходит. Если же срок годности ресурса истек, то клиент делает условный запрос для того, чтобы выяснить, может ли сохраненная копия использоваться повторно или она должна быть заменена на более новую версию.
Условный запрос содержит заголовок If-Modified-Since и/или If-None-Match, который указывает серверу, какая версия кэша уже содержится в браузере. Если текущая версия не изменилась, то сервер выдаст ответ с заголовком HTTP/304 Not Modified без тела, в противном случае он может вернуть ответ HTTP/200 OK с новой версией ресурса.
Теперь возвратимся к обновлению страницы через кнопку F5. В теории нажатие на F5 не должно приводить к запросу на сервер, если ресурс находится в кэше и является актуальным, либо же должен быть осуществлен условный запрос, если ресурс находится в кэше, но он уже не актуален. Комбинация же Ctrl + F5 должна приводить к безусловному запросу, минуя кэш.
Кстати, я заметил, что при Ctrl + F5 в Chrome к запросам добавляются заголовки Cache-Control: no-cache и Pragma: no cache. Это весьма любопытная вещь и я решил на своей тестовой странице провести исследование поведения браузера (и поведение кэша) при разном виде обновления страницы.
Моя тестовая страница содержит три JS-файла, один из которых при ответе имеет заголовок Cache-Control: no-cache, другой — Cache-Control: private, max-age=15, а последний не имеет контроля кэша.
И вот какие результаты я смог получить:
Link navigation — это поведение, когда пользователь уходит со странице по ссылке, а затем возвращается обратно через кнопку «Назад». Конечно, данный способ не является методом обновления, однако некоторые пользователи ожидают увидеть свежий контент каждый раз, когда они посещают страницу независимо от того, каким образом они попали на эту страницу.