Кэширование запросов

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

Базовые принципы

По умолчанию браузер способен кэшировать запросы GET к статическим ресурсам. Однако в случае динамических API-сервисов сервер обычно добавляет заголовки, запрещающие кэш. Кроме того, jQuery на уровне настроек для $.ajax с параметром method: "GET" может добавлять параметр _ (timestamp), чтобы предотвратить кэширование.

Чтобы восстановить кэширование на стороне браузера:

$.ajax({
    url: "/api/data",
    method: "GET",
    cache: true,
    success: function (data) {
        // обработка
    }
});

Установка cache: true явно запрещает добавление временной метки к запросу.

Кэширование в памяти приложения

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

const cache = {};

function getData(key) {
    if (cache[key]) {
        return $.Deferred().resolve(cache[key]).promise();
    }
    return $.ajax({
        url: "/api/" + key,
        method: "GET"
    }).then(function (data) {
        cache[key] = data;
        return data;
    });
}

В данном подходе Deferred обеспечивает унифицированный интерфейс: как в случае с кэшом, так и при реальном AJAX-запросе используется promise.

Управление сроком жизни данных

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

const cache = new Map();
const TTL = 60000; // 60 секунд

function getData(key) {
    const entry = cache.get(key);
    const now = Date.now();

    if (entry && now - entry.timestamp < TTL) {
        return $.Deferred().resolve(entry.value).promise();
    }

    return $.ajax({ url: "/api/" + key, method: "GET" })
        .then(function (data) {
            cache.set(key, { value: data, timestamp: now });
            return data;
        });
}

Подобный подход снижает количество запросов при сохранении актуальности данных.

Кэширование на уровне JSONP

В сценариях с JSONP браузер по умолчанию может кэшировать ответы, поскольку запрос выполняется через тег <script>. При необходимости отключения кэширования используется параметр cache: false или добавляется уникальный ключ к URL.

$.ajax({
    url: "https://example.com/jsonp",
    dataType: "jsonp",
    cache: false
});

Использование localStorage и sessionStorage

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

function getDataWithStorage(key) {
    const cached = localStorage.getItem(key);
    if (cached) {
        return $.Deferred().resolve(JSON.parse(cached)).promise();
    }
    return $.ajax({ url: "/api/" + key })
        .then(function (data) {
            localStorage.setItem(key, JSON.stringify(data));
            return data;
        });
}

sessionStorage аналогичен, но живет в пределах текущей вкладки.

Контроль через серверные заголовки

Заголовки Cache-Control, Expires и ETag в ответе сервера определяют, будет ли браузер повторно запрашивать ресурс, использовать копию или выполнять условный запрос. jQuery прозрачно работает поверх этой схемы: если сервер разрешил кэширование, клиент повторно использует ресурс автоматически.

ETag-механизм снижает нагрузку, отправляя условный запрос и получая статус 304 Not Modified, после чего повторно используется старый контент.

Кэширование при совпадении параметров запроса

Важно понимать, что кэширование привязано к URL и параметрам. Любое различие в строке запроса создаёт новый ключ для кэша. Например:

/api/data?page=1
/api/data?page=2

становятся двумя отдельными записями.

Встраивание кэширования в плагины

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

Особенности при POST-запросах

POST не кэшируется браузером. Если необходимо кэширование, применяется внутренняя логика сохранения результата. Важно обеспечить корректную идентификацию ключа: тело POST может содержать сложные структуры, требующие сериализации.

Баланс между скоростью и актуальностью

Кэширование запросов создаёт компромисс между производительностью и свежестью данных. В таких сценариях используется комбинация:

  • короткий TTL для динамичных данных,
  • localStorage для редко изменяющихся списков,
  • серверные заголовки и ETag для гарантии актуальности.

Дополнительные настройки jQuery

Глобальная конфигурация через $.ajaxSetup позволяет централизованно управлять кэшем:

$.ajaxSetup({
    cache: true
});

Этот параметр применится ко всем последующим $.ajax, $.get и $.getJSON, если в них явно не указан обратный параметр.

Практический итог механизма

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

Оглавление