Производительность различных конфигураций

Библиотека Tabbable в JavaScript предназначена для работы с управляемой навигацией по элементам страницы с помощью клавиши Tab. Она позволяет определить, какие элементы могут получить фокус, а какие — нет. Основная задача Tabbable — создание списков интерактивных элементов, которые корректно обрабатывают порядок фокусировки в DOM.

Ключевыми моментами являются:

Фокусируемость элементов — элемент считается фокусируемым, если на него можно перейти с помощью Tab. Это зависит от типа элемента (input, button, a с href) и атрибутов tabindex, disabled, hidden.
Видимость и доступность — элементы, скрытые через CSS (display: none, visibility: hidden) или aria-атрибуты, не включаются в результат Tabbable.
Порядок табуляции — библиотека учитывает атрибут tabindex для определения порядка обхода: положительные значения задают приоритет, 0 — стандартный порядок, отрицательные — исключают из табуляции.

Методы и их особенности

`tabbable(element, options)`

Основная функция библиотеки возвращает массив всех tabbable элементов внутри указанного контейнера.

Параметры:
- element — корневой элемент для поиска tabbable элементов.
- options — объект конфигурации. Основные свойства:
  - includeContainer — включить корневой элемент в список, если он tabbable.
  - getShadowRoot — функция для обхода теневых DOM (Shadow DOM).
Возвращаемое значение — массив элементов в порядке табуляции.

Особенности работы: функция рекурсивно обходит DOM, проверяет видимость, атрибуты disabled и tabindex, исключая элементы, не попадающие в стандартный порядок фокусировки.

`isTabbable(element, options)`

Позволяет проверить, является ли конкретный элемент tabbable.

Быстрое решение для фильтрации элементов перед их добавлением в пользовательский интерфейс.
Учитывает все правила видимости и доступности, включая Shadow DOM при соответствующей настройке.

`focusable(element, options)`

Определяет, может ли элемент получить фокус вообще, не только через Tab. Отличается от isTabbable тем, что элементы с отрицательным tabindex считаются focusable, но не tabbable.

Производительность и конфигурации

Влияние глубины DOM

Производительность напрямую зависит от размера и глубины дерева DOM.

Мелкие контейнеры (до 100 элементов) обрабатываются мгновенно.
Глубокие и широкие структуры (500+ элементов, много вложенных div) требуют оптимизации.
Использование опции includeContainer: false снижает нагрузку, так как корневой элемент проверяется отдельно.

Shadow DOM

Обход Shadow DOM добавляет дополнительную рекурсию. Для крупных веб-компонентов рекомендуется передавать getShadowRoot, чтобы библиотека обходила только нужные ветви.

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

Оптимизация через фильтрацию

Можно применять кастомные фильтры, чтобы исключать определённые классы элементов из проверки. Пример:

const tabbableElements = tabbable(container).filter(el => !el.classList.contains('skip-tab'));

Это сокращает массив элементов и ускоряет обработку.

Сравнение вариантов конфигураций

Конфигурация	Влияние на производительность	Применение
`includeContainer: true`	Незначительное снижение скорости	Малые контейнеры, когда важен фокус на корне
`includeContainer: false`	Быстрее на больших контейнерах	Основной сценарий обхода вложенных элементов
Shadow DOM без фильтрации	Сильно нагружает	Полный обход всех компонентов
Shadow DOM с `getShadowRoot`	Оптимально для крупных приложений	Контролируемый обход только нужных теневых деревьев
Кастомная фильтрация элементов	Значительно ускоряет	Исключение скрытых или редко используемых элементов

Влияние атрибутов и динамических изменений

Частые изменения DOM (добавление/удаление элементов) требуют повторного вызова tabbable, иначе массив элементов устаревает.
Атрибуты tabindex и disabled сильно влияют на результат.
Динамическое скрытие элементов через CSS лучше синхронизировать с вызовом Tabbable для точной актуальной навигации.