У цій замітці піде мова на тему браузерного кеша і управління ім. Для того, щоб оновити сторінку в браузері, багато хто використовує звичну кнопку 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 - це поведінка, коли користувач залишає сторінці за посиланням, а потім повертається назад через кнопку "Назад". Звичайно, даний спосіб не є методом оновлення, однак деякі користувачі очікують побачити свіжий контент кожен раз, коли вони відвідують сторінку незалежно від того, яким чином вони потрапили на цю сторінку.

джерело