Фоновая подготовка снимков

Снять элемент стоит от нескольких миллисекунд до нескольких сотен — смотря какой размер, шрифты и картинки. Подготовка делает эту работу заранее, чтобы remove() начал рисовать сразу.

Фоновая подготовка включена по умолчанию и использует стратегию visible-idle. Но библиотека не знает, какие элементы вы позже передадите в remove(), и не обходит DOM сама. Поэтому каждый элемент, снимок которого нужно сделать заранее, необходимо передать в register(). Без регистрации remove() всё равно сработает, но снимок начнёт создаваться только при запуске операции. Опция preparation: false полностью отключает фоновую подготовку.

Зарегистрировать элементы

const effects = new Disintegrator({ preset: 'dust' });

const cards = document.querySelectorAll<HTMLElement>('[data-effects]');

effects.register(cards);

Вызов effects.register(cards) регистрирует элементы для фоновой подготовки. После этого их снимки создаются, когда элементы приближаются к области просмотра и у браузера появляется свободное время.

Остановить подготовку элементов

Если наблюдение потребуется остановить раньше вызова destroy(), сохраните функцию, которую возвращает register():

const stopPreparing = effects.register(cards);

Это альтернативный вариант предыдущей регистрации: повторно вызывать register() для тех же элементов не нужно. Когда фоновая подготовка больше не нужна, вызовите сохранённую функцию:

stopPreparing();

Она прекращает наблюдение и не изменяет DOM. Регистрации используют счётчик ссылок: если два компонента зарегистрировали один узел, каждая функция остановки освобождает только свою регистрацию, а наблюдение прекращается после вызова обеих.

Настроить условия

const effects = new Disintegrator({
  preset: 'dust',
  preparation: {
    strategy: 'visible-idle',
    rootMargin: '300px 0px',
    concurrency: 1,
    shouldPrepare: (element) => element.matches('[data-effects]'),
    invalidateOnResize: true,
    observeMutations: false,
    cachePixelBudget: 8_000_000,
  },
});

shouldPrepare(element) проверяется до постановки задачи. Здесь можно учитывать тип элемента, состояние интерфейса, сеть или feature flag.

Явное управление

await effects.prepare(elements); // подготовить сейчас
effects.invalidate(elements); // удалить устаревшее и перепоставить зарегистрированное
effects.clearPrepared(); // очистить весь кэш

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

Операция никогда не анимирует по снимку, в котором не уверена. Если снимка нет, он ещё делается, устарел или вытеснен из кэша, она сначала снимает свежий.

Бюджет кэша

Кэш держит 8 миллионов физических пикселей и при переполнении выбрасывает снимок, к которому дольше всего не обращались. Считаются только снимки — удержанные DOM-элементы нет. У выброшенного канвас обнуляется, чтобы браузер мог забрать память обратно.

Уменьшайте бюджет на устройствах с ограниченной памятью. Увеличивайте его только после измерения реальной стоимости захвата.

Инвалидирование

По умолчанию invalidateOnResize имеет значение true, а observeMutations — false: наблюдение за всем поддеревом DOM может быть дорогим. После значимого изменения содержимого вызовите invalidate() самостоятельно.

При observeMutations: true добавление узлов, изменение текста, атрибутов кроме style и загрузка вложенных ресурсов инвалидируют снимок и повторно ставят элемент на подготовку. Инлайновый style только удаляет устаревший снимок: анимационные библиотеки часто обновляют его на каждом кадре, поэтому автоматический перезахват создал бы цикл. Следующая операция при необходимости снимет актуальное состояние сама. После однократного изменения стиля вызовите invalidate(), если хотите снова подготовить это состояние в фоне.

invalidate() обновляет и подготовленные canvas, и кеши движка через context.invalidate. Явный prepare() также запрашивает обновление; после clearPrepared() оно требуется при следующем захвате. Это относится и к изменениям CSSOM, которые не видны DOM-наблюдателям. Пользовательские адаптеры с собственным кешем должны учитывать context.invalidate.