Почему Тестирование Кэширования Важно
Кэширование значительно улучшает производительность, сохраняя копии ресурсов. Однако некорректное кэширование приводит к тому, что пользователи видят устаревший контент или сталкиваются со сломанными страницами после деплоя.
Уровни Кэша
Каждый уровень может независимо кэшировать и отдавать устаревший контент: Кэш Браузера → CDN Edge → Реверс-Прокси → Кэш Приложения → База Данных.
Ключевые Заголовки Кэша
| Заголовок | Назначение | Пример |
|---|---|---|
Cache-Control | Основная директива | max-age=3600, public |
ETag | Отпечаток содержимого | "abc123def456" |
Last-Modified | Дата последнего изменения | Дата |
Vary | Кэш различается по заголовку | Vary: Accept-Language |
Директивы Cache-Control
| Директива | Значение |
|---|---|
public | Может кэшироваться любым кэшем |
private | Только браузер пользователя |
no-cache | Обязательна ревалидация с сервером |
no-store | Не кэшировать вообще |
max-age=N | Валиден N секунд |
immutable | Контент никогда не изменится |
Что Тестировать
Корректное Поведение Кэша
| Тип ресурса | Ожидаемое кэширование | Причина |
|---|---|---|
| Статические ресурсы (JS, CSS) | Длинный кэш (1 год) с хэшем | Cache busting обрабатывает обновления |
| HTML-страницы | no-cache или короткий | Контент часто меняется |
| API (публичные) | Короткий кэш (минуты) | Баланс свежести и производительности |
| API (авторизованные) | private, no-store | Предотвращение утечки между пользователями |
| Эндпоинты аутентификации | no-store | Чувствительные данные |
Инвалидация После Деплоя
- Задеплойте изменения CSS/JS
- Проверьте, что пользователи получают новую версию
- Проверьте, что старая кэшированная версия не ломает новый HTML
Кэш и Аутентификация
- Данные Пользователя A никогда не должны отдаваться из кэша Пользователю B
- Выход из системы должен инвалидировать кэш специфичного контента
Vary: Cookieилиprivateдля авторизованных ответов
Упражнение: Аудит Кэширования
Шаг 1: Инспекция Заголовков
DevTools > Network. Загрузите страницу и проверьте заголовки:
| Ресурс | Cache-Control | ETag | Max-Age | Корректно? |
|---|---|---|---|---|
| HTML-страница | ||||
| CSS-файл | ||||
| JS-бандл | ||||
| Изображение | ||||
| API публичная | ||||
| API авторизованная |
Шаг 2: Тестирование Cache Busting
- Зафиксируйте текущие URL JS/CSS (с хэшами)
- Внесите изменение и задеплойте
- Проверьте, что URL изменились
- Hard refresh (Ctrl+Shift+R) загружает новые файлы
Шаг 3: Тестирование Устаревшего Контента
- Загрузите страницу с динамическим контентом
- Обновите контент из другого браузера/API
- Обновите в исходном браузере
- Проверьте отображение обновлённого контента
Шаг 4: Cross-User Тестирование Кэша
- Войдите как Пользователь A, посетите профиль
- Выйдите, войдите как Пользователь B
- Посетите тот же эндпоинт профиля
- Проверьте данные Пользователя B (не кэшированные данные A)
Решение: Типичные Баги Кэширования
Баг 1: CSS закэширован без хэша в URL. После деплоя пользователи видели старый CSS.
Баг 2: Авторизованный API-ответ закэширован CDN. CDN закэшировал профиль и отдавал другим пользователям.
Баг 3: Цена товара закэширована на 1 час. Клиенты видели старую цену после обновления.
Баг 4: Устаревший HTML после деплоя. HTML ссылался на старые JS-файлы, которых больше не существовало.
Баг 5: Кнопка «Назад» показывает чувствительные данные. После выхода кнопка «Назад» показывала дашборд предыдущего пользователя.
Отладка Проблем Кэша
# Проверка заголовков кэша
curl -I https://example.com/page
# Проверка CDN-кэша (ищите заголовок Age)
curl -I https://example.com/style.css | grep -i "age\|cache-control\|etag"
Ключевые Выводы
- Тестирование кэша должно охватывать все уровни: браузер, CDN и сервер
- Статические ресурсы должны использовать длинный кэш с хэшами для cache busting
- HTML должен использовать no-cache, чтобы пользователи всегда получали актуальную версию
- Авторизованные ответы должны использовать private или no-store
- Всегда тестируйте кэш после деплоев
- Кнопка «Назад» браузера может отдавать устаревший кэшированный контент