Производительность анимаций

Intro.js использует анимации для плавного отображения шагов и подсветки элементов интерфейса. Ключ к высокой производительности — правильное управление DOM и CSS-анимациями, минимизация перерисовок и оптимизация последовательности шагов.

Аппаратное ускорение анимаций

Intro.js применяет CSS-свойства transform и opacity для анимации появления подсказок и рамок вокруг элементов. Эти свойства обеспечивают аппаратное ускорение, так как они обрабатываются графическим процессором (GPU), а не центральным (CPU). Важные моменты:

Использовать translate3d вместо top/left: это снижает нагрузку на CPU и исключает перерасчёт стилей всего документа.
Opacity вместо display/block: плавное появление/исчезновение элемента без отключения от DOM.
Избегать анимаций размеров через width/height: изменение размеров триггерит перерасчёт макета (reflow), что сильно замедляет анимацию.

Минимизация количества шагов на экране

Каждый шаг Intro.js создаёт подсказку и рамку вокруг элемента. При большом числе шагов:

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

Кэширование DOM-элементов

Intro.js динамически ищет элементы по селекторам на каждом шаге. Это может быть дорогостоящим при больших страницах:

Использование фиксированных селекторов с id вместо сложных CSS-селекторов ускоряет поиск.
Если шаги повторяются, хранение ссылок на элементы в массиве и передача через element вместо querySelector снижает повторный поиск.

Настройка времени анимации

Параметр transitionDuration задаёт длительность анимации появления подсказки и рамки:

intro.setOptions({
    transitionDuration: 300
});

Меньшее значение ускоряет отклик, но может визуально казаться резким.
Большое значение создаёт плавное движение, но при слабых устройствах может вызывать рывки.
Оптимальное значение — баланс между плавностью и производительностью: обычно 200–400 мс.

Уменьшение нагрузки на страницу

Intro.js взаимодействует с DOM и прослушивает события окна (resize, scroll). Для высоконагруженных страниц:

Throttle событий: ограничение частоты обработки событий снижает нагрузку.
Удаление лишних слушателей: Intro.js автоматически управляет своими слушателями, но дополнительные кастомные обработчики должны быть оптимизированы.

Анимация подсветки элементов

Подсветка элемента (highlightClass) создаётся путём наложения рамки и затемнения остальных частей экрана. Для повышения производительности:

Минимизировать сложные тени и градиенты в CSS.
Использовать простую рамку и фон через rgba, избегая фильтров и сложных градиентов.
Плавность анимации достигается через transition на свойства transform и opacity.

Адаптация под мобильные устройства

На мобильных устройствах производительность особенно критична:

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

Пример оптимизированной инициализации Intro.js

const intro = introJs();
intro.setOptions({
    steps: [
        { element: '#header', intro: 'Заголовок сайта', position: 'bottom' },
        { element: '#menu', intro: 'Меню навигации', position: 'right' },
        { element: '#content', intro: 'Основной контент', position: 'top' }
    ],
    showStepNumbers: false,
    exitOnOverlayClick: true,
    transitionDuration: 250
});
intro.start();

В этом примере:

Используются короткие анимации (transitionDuration: 250).
Подсказки создаются только для элементов, реально видимых на странице.
Простые селекторы id ускоряют поиск элементов.