JavaScript Academy · Урок

Стратегии кэширования

Применяйте шаблоны «сначала кэш» и «сначала сеть».

«Стратегии кэширования» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Зачем нужны стратегии

Для разных ресурсов нужен разный подход. Логотип можно всегда отдавать из кэша, а данные API должны быть свежими. Стратегия кэширования определяет, обращаться ли сначала к кэшу или к сети и как объединять эти источники.

Сначала кэш

Сначала кэш: проверьте кэш; если запись найдена, верните её, иначе загрузите данные из сети. Этот подход идеально подходит для редко изменяющихся статических ресурсов, таких как шрифты, CSS и изображения.

async function cacheFirst(request) {
  const cached = await caches.match(request);
  return cached || fetch(request);
}

Сначала кэш с сохранением при промахе

При промахе кэша можно загрузить результат и одновременно сохранить его, чтобы следующий запрос выполнился быстро. Так кэш постепенно заполняется по мере просмотра страниц пользователями.

async function cacheFirst(request) {
  const cached = await caches.match(request);
  if (cached) return cached;
  const fresh = await fetch(request);
  const cache = await caches.open('runtime');
  cache.put(request, fresh.clone());
  return fresh;
}

Сначала сеть

Сначала сеть: сначала обратитесь к сети; если запрос успешен, используйте и сохраните результат, а при сбое (например, без подключения к сети) возьмите данные из кэша. Этот подход лучше всего подходит для часто обновляемого содержимого, например новостей или панелей мониторинга.

async function networkFirst(request) {
  try {
    const fresh = await fetch(request);
    const cache = await caches.open('runtime');
    cache.put(request, fresh.clone());
    return fresh;
  } catch (err) {
    return caches.match(request);
  }
}

Устаревшее содержимое с обновлением в фоне

Устаревшее содержимое с обновлением в фоне: немедленно возвращайте кешированную копию для скорости, одновременно загружая в фоновом режиме свежую копию, чтобы обновить кеш к следующему обращению. Отличный баланс скорости и актуальности.

async function staleWhileRevalidate(request) {
  const cache = await caches.open('runtime');
  const cached = await cache.match(request);
  const network = fetch(request).then(res => {
    cache.put(request, res.clone());
    return res;
  });
  return cached || network;
}

Только сеть и только кеш

Два простых крайних варианта:

Только сеть: всегда загружать данные и никогда не кешировать их (например, маяки аналитики).
Только кеш: отдавать только предварительно кешированные ресурсы и никогда не обращаться к сети (например, оболочку приложения).

// network-only:
// return fetch(request);
// cache-only:
// return caches.match(request);

Маршрутизация по типу запроса

В реальных приложениях для каждого запроса выбирают стратегию. В обработчике получения данных проверьте request.url или request.destination и направьте запрос соответствующим образом.

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(event.request));
  } else {
    event.respondWith(cacheFirst(event.request));
  }
});

Обработка автономных резервных вариантов

Если данные не найдены ни в сети, ни в кеше, верните понятную автономную страницу или замещающий элемент вместо некорректного ответа.

async function withOfflineFallback(request) {
  return (await caches.match(request)) ||
         (await caches.match('/offline.html'));
}

Кеширование только успешных ответов

Не кешируйте ошибки. Проверьте response.ok (или статус) перед сохранением, чтобы ответ 404 или 500 не испортил кеш.

const fresh = await fetch(request);
if (fresh.ok) {
  cache.put(request, fresh.clone());
}
return fresh;

Выбор стратегии

Сопоставляйте стратегию с содержимым:

Статические ресурсы: сначала кеш
Динамические данные: сначала сеть
Смешанное содержимое: устаревшее содержимое с обновлением в фоне

Большинство приложений объединяют несколько стратегий с помощью маршрутизации запросов.

Повторение стратегий

Стратегии кеширования позволяют одному сервисному обработчику разумно обслуживать всё приложение: мгновенно отдавать статические ресурсы, свежие динамические данные и корректно обрабатывать автономный режим — всё выбирается для каждого запроса.

Быстрая проверка

Проверьте понимание стратегий кеширования.

Повторение

Вы изучили стратегии кеширования:

Сначала кеш — для статических ресурсов.
Сначала сеть — для свежих динамических данных.
Устаревшее содержимое с обновлением в фоне — для сочетания скорости и актуальности.
Маршрутизируйте каждый запрос через request.url/destination.
Кешируйте только успешные ответы и предоставляйте резервные варианты для автономного режима.

Далее — фоновая синхронизация и обновление кеша.

Часто задаваемые вопросы

Урок «Стратегии кэширования» бесплатный?

Да — полный текст урока «Стратегии кэширования» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Стратегии кэширования»?

Применяйте шаблоны «сначала кэш» и «сначала сеть». Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Стратегии кэширования»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy