Оптимизация для слабых устройств

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

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

Каждый шаг Shepherd.js содержит конфигурацию, обработчики событий (beforeShowPromise, when, advanceOn) и DOM-элементы, которые создаются динамически. На слабых устройствах большое количество шагов и сложные обработчики приводят к росту нагрузки на процессор и памяти.

Рекомендации:

  • Объединять шаги, где это возможно, чтобы уменьшить общее количество элементов в DOM.
  • Использовать destroy() для туров после завершения, освобождая память:
tour.complete();
tour.destroy();
  • Избегать тяжелых вычислений внутри beforeShowPromise и when — переносить логику вне туров.

Оптимизация анимаций и плавности переходов

Shepherd.js использует CSS-анимации и переходы для появления подсказок и стрелок. На слабых устройствах они могут «тормозить» интерфейс.

Стратегии оптимизации:

  • Отключение анимаций при необходимости:
const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-default',
    scrollTo: false,
    showCancelLink: true
  },
  useModalOverlay: false
});
  • Применение более лёгких CSS-классов без трансформаций, которые требуют отрисовки GPU.
  • Сокращение длительности анимаций или использование transition: none для слабых устройств:
.shepherd-element {
  transition: none !important;
}

Эффективная работа с DOM

Shepherd.js создаёт элементы подсказок в body и позиционирует их относительно целевых элементов. Для слабых устройств важно минимизировать частые пересчёты положения и layout thrashing.

Приёмы:

  • Использование scrollTo: false для шагов, где прокрутка страницы не критична.
  • Ограничение обновления позиции подсказок только при изменении размера окна или контента:
tour.on('show', () => {
  window.requestAnimationFrame(() => {
    tour.currentStep.updateStepElementPosition();
  });
});
  • Предварительное создание и кеширование элементов подсказок, если тур повторяется несколько раз.

Lazy-loading контента и шагов

Тяжёлые шаги, содержащие изображения, видео или сложный HTML, стоит загружать по требованию.

Пример загрузки контента перед показом шага:

tour.addStep({
  id: 'image-step',
  text: () => {
    const img = new Image();
    img.src = 'heavy-image.jpg';
    return img.outerHTML;
  },
  attachTo: { element: '#image-container', on: 'bottom' }
});

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

Управление событиями и памятью

Каждый шаг Shepherd.js может подписываться на события DOM и пользовательские события. Без корректного удаления слушателей они накапливаются, создавая утечки памяти.

Оптимизация:

  • Использование встроенного события destroy для снятия подписок:
tour.on('destroy', () => {
  document.removeEventListener('scroll', scrollHandler);
});
  • Минимизация использования глобальных обработчиков. Если возможно, подписываться только на локальные элементы шага.
  • Использование стрелочных функций и bind аккуратно, чтобы не создавать лишние ссылки на контекст.

Динамическая подстройка под устройство

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

const isLowEndDevice = navigator.deviceMemory && navigator.deviceMemory < 2;

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-default',
    scrollTo: !isLowEndDevice,
    showCancelLink: true
  }
});

Таким образом, туры остаются функциональными, но без тяжёлых анимаций и скроллинга на маломощных устройствах.

Использование минимального CSS и кастомных тем

Shepherd.js позволяет задавать собственные темы для шагов. На слабых устройствах рекомендуется:

  • Минимизировать CSS-классы и сложные тени.
  • Отказаться от больших изображений стрелок и графических украшений.
  • Использовать упрощённые шрифты и размеры, чтобы снизить нагрузку на рендеринг.

Пример лёгкой кастомной темы:

.shepherd-theme-light {
  background: #fff;
  color: #333;
  border-radius: 4px;
  box-shadow: none;
}

Вывод

Правильная конфигурация Shepherd.js для слабых устройств требует внимания к шагам, анимациям, работе с DOM и управлению памятью. Снижение нагрузки через объединение шагов, отключение анимаций, lazy-loading и контроль событий позволяет сохранить плавность работы и обеспечить отзывчивость интерфейса, даже при ограниченных ресурсах.

Оглавление