Кеширование в браузере — это механизм, который позволяет сохранить копии загружаемых ресурсов (таких как HTML, CSS, изображения и JavaScript) на локальном устройстве пользователя для ускорения загрузки веб-страниц при повторных посещениях.

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

1. Cache-Control

Этот заголовок определяет, как и как долго ресурсы могут храниться в кеше. Некоторые из ключевых директив Cache-Control:

max-age=<seconds>: Определяет время (в секундах), в течение которого ресурсы считаются свежими. Например, max-age=3600 означает, что ресурс можно кешировать на 1 час.
no-cache: Браузер должен проверить наличие новой версии ресурса перед использованием кеша.
no-store: Запрещает кеширование. Ресурс должен загружаться каждый раз заново.

Пример использования в ответе сервера:

Cache-Control: max-age=3600, public

2. ETag

ETag (Entity Tag) — это уникальный идентификатор версии ресурса. Когда браузер запрашивает ресурс, сервер может отправить ETag. При последующих запросах браузер может отправить этот ETag обратно серверу для проверки, изменился ли ресурс.

Пример работы:

Сервер отвечает с заголовком:
```
ETag: "abc123"
```
При следующем запросе браузер отправляет:
```
If-None-Match: "abc123"
```
Если ресурс не изменился, сервер может ответить с кодом 304 Not Modified, что говорит браузеру использовать кешированную версию.

3. Expires

Этот заголовок также определяет, когда ресурс считается устаревшим, но задает дату и время в будущем вместо времени в секундах (как Cache-Control). Например:

Expires: Wed, 21 Oct 2025 07:28:00 GMT

4. Pragma

Этот заголовок используется для совместимости с HTTP/1.0 и фактически является устаревшим в HTTP/1.1. Однако иногда его можно встретить в старых приложениях:

Pragma: no-cache

Пример кода на Node.js с использованием Express

Вот пример простого сервера на Node.js, который устанавливает заголовки кеширования:

const express = require('express');
const app = express();

app.get('/image', (req, res) => {
    res.setHeader('Cache-Control', 'public, max-age=3600');
    res.setHeader('ETag', 'abc123');
    res.sendFile('path/to/image.png'); // Укажите путь к вашему изображению
});

app.listen(3000, () => {
    console.log('Сервер запущен на http://localhost:3000');
});

Заключение

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

Предыдущий вопрос

Как избежать проблем с CORS в веб-приложении?

Следующий вопрос

Что такое CSP и как она помогает повысить безопасность?

Содержание: