На каком уровне происходит кэширование

«На каком уровне происходит кэширование» — вопрос из категории Архитектура, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Кэширование может происходить на нескольких уровнях:

  1. Браузерный кэш (HTTP-кэширование)

    • Заголовки Cache-Control, ETag, Last-Modified
    Cache-Control: max-age=3600
  1. CDN-кэш

    • Промежуточные серверы доставки контента (Cloudflare, Akamai)
  2. Серверный кэш

    • Redis, Memcached, Varnish
    • Кэширование API-ответов
  3. Кэш приложения

    • Service Workers (PWA)
    • Локальное хранилище (localStorage, IndexedDB)
    caches.open('my-cache').then(cache => cache.add('/api/data'));
  1. Кэш фреймворков

    • React.memo, useMemo, useCallback
    const MemoComponent = React.memo(MyComponent);

Выбор уровня зависит от задачи: браузерный кэш уменьшает сетевые запросы, серверный - нагрузку на БД, а кэш приложения улучшает офлайн-работу.