Тысяча SVG-иконок ломают FPS. Что делать с панелью мониторинга?
Тысяча SVG-иконок ломают FPS. Что делать с панелью мониторинга? Каждый <svg> в DOM — это полноценный узел с собственным жизненным циклом, стилями и вычислением layout. При 1000 таких узлов память растет, FPS падает, а скролл превращается в слайд-шоу. Частая ошибка — пытаться решить проблему через один инструмент, не учитывая сценарий использования. Вот три подхода с реальными trade-offs. Виртуализация для списков React-window или Intersection Observer рендерят только то, что в окне просмотра. Это спасает для скроллящихся панелей, но если у вас анимация на каждом элементе (пульсация, вращение), DOM все равно пересчитывает layout для видимых узлов. Предупреждение: виртуализация бесполезна, когда все элементы находятся в области видимости. OffscreenCanvas для статики Рисуйте SVG в Web Worker через OffscreenCanvas. Transferable объект передается без копирования памяти. На выходе — bitmap для отрисовки. Идеально для статичных иконок: никакого DOM, никаких стилей. Но кликнуть по такому SVG не выйдет, и анимацию через CSS не повесить. Если нужен hover — придется самостоятельно считать координаты. Клонирование узлов для повторяющихся шаблонов Сценарий: панель с 50 датчиками, каждый — повторяющаяся группа из трех SVG. Не делайте innerHTML для каждого. Загрузите шаблон один раз, распарсьте через DOMParser и клонируйте через document.importNode: const template = await fetch('sensor.svg').then(r => r.text()); const parser = new DOMParser(); const doc = parser.parseFromString(template, 'image/svg+xml'); const clone = document.importNode(doc.documentElement, true); container.appendChild(clone); Глубокое клонирование быстрее парсинга строки на каждый элемент. Минус: если SVG разные — не сработает. Вывод: Выбор стратегии зависит от сценария: для прокрутки — виртуализация, для повторяющихся иконок — importNode, для динамической отрисовки множества элементов — OffscreenCanvas с Path2D.