> Какие данные кэшируются и как работает кэширование (JavaScript)

Кэширование во фронтенде - это сохранение часто запрашиваемых данных в быстром хранилище (память браузера, localStorage, Service Worker) для ускорения повторных запросов и снижения нагрузки на сервер.

Типы кэшируемых данных:

1. Статические ресурсы (HTML, CSS, JS, изображения) - кэшируются браузером по HTTP-заголовкам (Cache-Control, ETag). Например, Cache-Control: max-age=3600 кэширует файл на час.

2. API-ответы - данные с сервера (списки товаров, профили пользователей). Кэшируются в памяти (Redux, React Query) или в localStorage для офлайн-доступа.

3. Сессионные данные (токены, настройки) - хранятся в sessionStorage или cookies для быстрого доступа без повторной авторизации.

4. Вычисления - результаты дорогих операций (например, сортировка больших массивов) кэшируются в переменных или через useMemo/useCallback.

Как работает кэширование на практике:

• HTTP-кэширование: Браузер проверяет заголовки ответа. Если ресурс свежий (по max-age), берет из локального кэша. Если устарел, отправляет запрос с If-None-Match — сервер возвращает 304 Not Modified, и кэш обновляется.

• Service Worker: Перехватывает запросы, сначала ищет в кэше (Cache API), при отсутствии - загружает с сети и сохраняет. Позволяет работать офлайн.

• In-memory кэш: Например, React Query хранит данные в памяти, автоматически инвалидируя их по таймеру или при мутации. Это уменьшает количество запросов к API.

• localStorage/sessionStorage: Для долгоживущих данных (например, темы оформления) - записываем при получении, читаем при загрузке страницы.

Важные нюансы:

• Инвалидация кэша - ключевая проблема. Используйте версионирование ресурсов (hash в имени файла) или явные ключи (например, user_123_profile).

• Не кэшируйте чувствительные данные (пароли, токены) в localStorage без шифрования.

• Для Node.js/Go на бэкенде кэширование часто реализуется через Redis или in-memory map с TTL (time-to-live), чтобы не дублировать логику на клиенте.

Пример простого кэша на JavaScript:

JAVASCRIPT
const cache = new Map();
function fetchWithCache(url, ttl = 60000) {
  const cached = cache.get(url);
  if (cached && Date.now() - cached.timestamp < ttl) {
    return Promise.resolve(cached.data);
  }
  return fetch(url)
    .then(res => res.json())
    .then(data => {
      cache.set(url, { data, timestamp: Date.now() });
      return data;
    });
}