Ограничения и особенности

Vanilla Disintegrate работает поверх браузерных API и не может гарантировать одинаковый результат для любого DOM-содержимого, браузера и устройства. Ниже перечислены ограничения, которые важно учитывать при выборе эффекта и настройке производительности.

Снимок не является пиксельной копией DOM

Встроенные эффекты частиц анимируют Canvas-снимок элемента, а не его реальные DOM-узлы. По состоянию на 2026 год веб-платформа не предоставляет стабильного и широко поддерживаемого API для прямого копирования уже отрисованных пикселей отдельного DOM-элемента. Поэтому движок захвата вынужден заново воспроизводить внешний вид элемента.

Вход vanilla-disintegrate/snapdom использует SnapDOM: он переносит содержимое и стили элемента в SVG, после чего браузер преобразует результат в Canvas. Повторная растеризация может отличаться от оригинального DOM:

• сглаживанием и толщиной текста;
• субпиксельным положением границ;
• отображением теней, фильтров, масок и трансформаций;
• результатом при нестандартном масштабе страницы или дробном devicePixelRatio;
• поведением в разных браузерных движках.

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

Что даёт renderQuality: 'exact'

Режим exact отключает адаптивное уменьшение разрешения внутри рендерера частиц. Он помогает сохранить детализацию уже полученного снимка, но не делает сам DOM-снимок точнее и не исправляет отличия растеризации текста.

Иными словами, exact отвечает за качество дальнейшего рендеринга, а не за точность исходного захвата.

Движок захвата можно заменить

В IIFE-сборке SnapDOM используется как готовый адаптер захвата. При его выборе учитывалась производительность: по состоянию на 2026 год опубликованные проектом сравнительные тесты показывают низкую задержку при захвате DOM-элементов разной сложности. Фактическая скорость зависит от содержимого, браузера и устройства, а способ захвата не отменяет ограничения браузерной растеризации.

Параметр capture принимает любой адаптер, способный вернуть <canvas>, поэтому для конкретного проекта можно использовать другой движок или собственную реализацию. Полный контракт адаптера описан в API захвата.

Тем не менее ни SnapDOM, ни другие доступные на этот момент DOM-to-Canvas-решения не гарантируют попиксельную точность для любого содержимого. Разные движки по-разному обрабатывают текст, изображения, SVG, формы, псевдоэлементы и браузерные эффекты.

Динамическое содержимое

Снимок фиксирует состояние элемента в конкретный момент. Изменения DOM, стилей, размеров или загруженных ресурсов после захвата в него не попадут.

Перед захватом желательно дождаться:

• загрузки используемых шрифтов;
• декодирования изображений;
• завершения переходов и временных анимаций;
• окончательного расчёта размеров элемента.

Предварительно подготовленные снимки ускоряют первый запуск эффекта, но могут устареть, если содержимое элемента изменилось. По умолчанию библиотека автоматически инвалидирует кэш при изменении размеров, но не наблюдает за всем поддеревом DOM. После значимого изменения содержимого вызовите invalidate() или включите observeMutations, если дополнительное наблюдение оправдано.

Ограничения WebGL2

WebGL2 требуется только встроенным эффектам частиц. Ядро библиотеки и пользовательские эффекты могут работать через Web Animations API, Canvas 2D, CSS или собственный рендерер.

Если WebGL2 недоступен или браузер не смог создать контекст, DOM-операция всё равно выполняется, но визуальный эффект завершается со статусом skipped, а причина передаётся в onError.

Каждый одновременно запущенный встроенный эффект использует один контекст WebGL2. Библиотека переиспользует завершившие работу контексты и ограничивает размер общего пула, однако браузер, GPU или драйвер могут установить более строгий предел.

Стоимость для производительности

Для обычных интерфейсных элементов и нескольких одновременно запущенных эффектов нагрузка на современные устройства кратковременна и, как правило, практически незаметна. Процессор участвует в создании снимка, а встроенная анимация частиц выполняется на GPU через WebGL2; после завершения операции временные текстуры удаляются, а WebGL2-контекст возвращается в ограниченный пул для повторного использования.

Нагрузка становится заметнее при захвате крупных элементов, высокой плотности пикселей, большом количестве параллельных эффектов или использовании режима exact. Режим auto подходит большинству интерфейсов, включая слабые устройства: он ограничивает рабочее разрешение. exact лучше использовать точечно — для небольших элементов, где дополнительная чёткость действительно заметна.

Поддержка браузеров

Рантайм выпускается в формате ES2020 и использует Canvas, Web Animations API (Animation.finished и Element.getAnimations()), AbortController и requestAnimationFrame. Встроенные пресеты дополнительно требуют WebGL2.

Полифиллы не включены. Эти версии определяют минимальную совместимость по набору API, но не гарантируют, что любой GPU, драйвер или настройка браузера позволит создать контекст WebGL2.

Поддержка браузера также не гарантирует идентичную растеризацию DOM-снимка на разных движках, масштабах страницы и устройствах.

Создавайте Disintegrator только в браузере, а не во время серверного рендеринга. Внешние изображения, шрифты и стили должны разрешать CORS или проходить через proxy-опцию движка захвата, иначе они могут не попасть в Canvas-снимок.

Практические рекомендации

Для наиболее естественного перехода:

• анимируйте законченные элементы и блоки, а не отдельные глифы;
• проверяйте результат во всех целевых браузерах;
• используйте exact только там, где это оправдано;
• не изменяйте содержимое элемента во время захвата;
• отдельно тестируйте видео, <iframe>, Canvas, WebGL и ресурсы с других доменов;
• при необходимости подключайте специализированный capture.