Кэширование в Mapbox GL JS строится как многоуровневая система, в которой одновременно участвуют браузерный HTTP-кэш, внутренний кэш тайлового рендерера, кэш ресурсов (glyphs, sprites), а также прикладные стратегии предварительной загрузки и офлайн-хранения. Эффективная работа карты напрямую зависит от согласованности этих уровней и корректной настройки источников данных.
Архитектура кэширования в Mapbox GL JS можно рассматривать как цепочку:
Каждый слой решает собственный класс задач и имеет собственную стратегию инвалидирования.
На уровне сети ключевую роль играют HTTP-заголовки:
Cache-ControlETagLast-ModifiedТайлы, загружаемые картой, обычно представляют собой:
.pbf).png, .jpg).pbf).png + .json)Браузер кэширует эти ресурсы автоматически при корректной настройке заголовков. Наиболее эффективная стратегия — immutable-кэширование с долгим TTL:
Cache-Control: public, max-age=31536000, immutableПри этом обновление данных достигается через версионирование URL (например, добавление версии стиля или tileset id).
В Mapbox GL JS существует отдельный in-memory кэш тайлов. Он управляется через LRU-алгоритм (Least Recently Used), где:
Ключ кэша формируется из:
Это означает, что даже при одинаковом URL тайл может не совпадать логически, если отличается стиль или параметры слоя.
Vector tiles являются наиболее эффективным форматом с точки зрения кэширования, поскольку:
Стратегия кэширования:
Особенность: один и тот же тайл может использоваться несколькими слоями стиля одновременно, что снижает количество запросов.
Raster tiles менее гибкие, поскольку содержат уже отрендеренные изображения. Это приводит к:
Оптимизация достигается через:
Glyphs в Mapbox GL JS загружаются пакетами диапазонов символов. Каждый диапазон:
Типичный URL:
/fonts/{fontstack}/{range}.pbfСтратегия кэширования:
При смене языка или стиля часть кэша становится неактуальной, но сохраняется до вытеснения LRU.
Спрайты состоят из:
sprite.png)sprite.json)Особенности:
Внутренне спрайты преобразуются в GPU-ресурсы, что добавляет дополнительный уровень кэширования уже на уровне видеопамяти.
Style JSON также участвует в кэшировании. Однако он:
Ключевой принцип: изменение стиля должно сопровождаться изменением его URL, иначе возможны устаревшие конфигурации слоев.
Использование Service Worker позволяет внедрить собственную стратегию:
Пример стратегии:
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
if (url.pathname.includes('/tiles/')) {
event.respondWith(
caches.match(event.request).then(cached => {
return cached || fetch(event.request);
})
);
}
});Service Worker позволяет реализовать офлайн-карты, но требует строгого контроля версионирования данных.
Офлайн-режим требует явного сохранения:
Стратегии:
Кэширование тайлов в bounding box:
Предварительный запрос тайлов:
Это уменьшает задержки первого рендера.
Одна из ключевых проблем — обновление данных.
Подходы:
/tiles/v2/{z}/{x}/{y}.pbfВнутренний кэш очищается автоматически, но:
Кэширование напрямую влияет на:
В Mapbox GL JS важны следующие параметры:
maxTileCacheSize (косвенно через конфигурации)Переполнение кэша приводит к:
Если несколько стилей используют один tileset:
Однако это работает только при идентичности:
Дополнительный уровень — GPU-кэш:
Этот слой не контролируется напрямую, но зависит от:
При нехватке GPU памяти происходит пересоздание ресурсов, что визуально выражается в “перемигивании” карты при панорамировании.