Как работает кэширование в браузере

Браузерное кэширование сохраняет статические ресурсы (CSS, JS, изображения) локально, чтобы ускорить последующие загрузки страниц.

Основные механизмы:

1. HTTP-заголовки (Cache-Control, Expires, ETag):
   • Cache-Control: max-age=3600 — ресурс кэшируется на 1 час.
   • ETag — проверка изменений на сервере без скачивания файла.

2. Service Workers:
   Позволяют контролировать кэш программно:
   javascript

   Копировать

   self.addEventListener('fetch', (event) => {
     event.respondWith(
       caches.match(event.request).then((response) => {
         return response || fetch(event.request);
       })
     );
   });

Типы кэша:

• Memory Cache — быстрый, но очищается при закрытии вкладки.
• Disk Cache — сохраняется между сессиями.

Очистка кэша:

• Принудительно через Ctrl+F5.
• Автоматически при изменении URL (например, добавление хэша style.css?v=2).