В Mapbox GL JS кэширование представляет собой многослойную систему, в которой участвуют несколько уровней: браузерный HTTP-кэш, внутренний ресурсный кэш библиотеки, кэш тайлов, спрайтов и шрифтов (glyphs), а также дополнительные механизмы хранения при офлайн-сценариях. Такая архитектура необходима для обеспечения плавного рендеринга карт, минимизации сетевых запросов и снижения нагрузки на GPU и CPU.
Ключевая особенность заключается в том, что каждый тип данных карты имеет собственную стратегию хранения и переиспользования. Тайлы векторных слоёв, растровые изображения, метаданные стилей и шрифты обрабатываются независимо, но координируются через общий ресурсный менеджер.
Первый уровень оптимизации происходит на стороне браузера. Mapbox GL JS активно использует стандартные механизмы HTTP-кэширования:
Cache-ControlETagLast-ModifiedПри повторных запросах тайлов, спрайтов или glyphs браузер может полностью избежать сетевого обращения, возвращая данные из локального дискового кэша.
Особенно важно поведение при работе с CDN: корректно настроенные заголовки позволяют добиться того, что один и тот же тайл может использоваться многими сессиями и вкладками браузера без повторной загрузки.
Тайлы — центральный элемент системы кэширования Mapbox GL JS. Они делятся на:
Каждый загруженный тайл сохраняется в памяти Mapbox GL JS и индексируется по ключу:
Внутренний кэш тайлов реализует LRU-подобную стратегию (least recently used). Это означает:
При изменении стиля карта может переиспользовать тайлы, если:
Каждый источник (source) в Mapbox GL JS имеет
собственный слой кэширования.
Например:
map.addSource('cities', {
type: 'vector',
url: 'mapbox://examples.city'
});Для таких источников кэшируются:
Особенность заключается в том, что источники могут переиспользоваться между стилями. При переключении стиля библиотека проверяет, можно ли сохранить уже загруженные данные, чтобы избежать повторного запроса.
Глифы используются для рендеринга текста на карте. Они загружаются пакетами в формате PBF и кэшируются на уровне:
URL шаблон обычно выглядит так:
/fonts/{fontstack}/{range}.pbfПроблемой является большое количество диапазонов символов для языков с широкими наборами символов, что может приводить к значительному росту кэша.
Спрайты представляют собой набор иконок и графических элементов стиля.
Mapbox GL JS загружает:
sprite.jsonsprite.pngПосле загрузки:
В отличие от тайлов, спрайты часто хранятся:
Это снижает количество повторных операций декодирования изображений.
Помимо браузерного кэша, библиотека поддерживает собственный слой кэширования ресурсов:
Этот слой управляет:
Если один и тот же ресурс запрашивается одновременно из нескольких слоёв, Mapbox GL JS инициирует только один сетевой запрос.
Кэш Mapbox GL JS ограничен по памяти. При превышении лимитов применяется стратегия удаления:
Система учитывает:
Это позволяет поддерживать баланс между производительностью и потреблением памяти.
Полная очистка кэша может быть необходима при:
На практике используются следующие стратегии:
map.setStyle(map.getStyle());Этот метод приводит к повторной инициализации источников и пересборке кэшей.
map.remove();Полностью освобождает память, включая GPU ресурсы.
Часто применяется более эффективный подход:
/tiles/{z}/{x}/{y}.pbf?v=2Это позволяет обходить кэш без вмешательства в код клиента.
Проблема инвалидации является одной из ключевых в системах картографии.
Основные стратегии:
Mapbox GL JS не предоставляет универсального метода принудительной инвалидации всех уровней кэша, поэтому ответственность распределяется между сервером и клиентской конфигурацией.
Для офлайн-режима используются дополнительные механизмы:
Офлайн-стратегии включают:
При офлайн-навигации Mapbox GL JS может работать полностью без сети, используя заранее сохранённые ресурсы.
В современных архитектурах часто добавляется Service Worker, который:
Это особенно важно для PWA-приложений с картами, где требуется контроль над сетевыми запросами.
Эффективная работа с кэшем в Mapbox GL JS обычно достигается через комбинацию:
Особое внимание уделяется предотвращению «cache thrashing», когда слишком частые изменения стиля приводят к постоянной перезагрузке ресурсов.
При смене стиля происходит:
Если структура данных совпадает, часть кэша может быть сохранена, что существенно ускоряет переключение.
При использовании нескольких экземпляров карты:
Это может приводить к увеличению потребления памяти при одновременной работе нескольких карт на одной странице.
Эффективность кэша напрямую влияет на:
Оптимальный кэш уменьшает количество операций: