Избегайте чрезмерного размера DOM

Большое дерево DOM может замедлить производительность вашей страницы по нескольким причинам:

  • Эффективность сети и производительность нагрузки

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

  • Производительность во время выполнения

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

  • Производительность памяти

    Если ваш JavaScript использует общие селекторы запросов, такие как document.querySelectorAll('li') , вы можете неосознанно хранить ссылки на очень большое количество узлов, что может перегрузить возможности памяти устройств ваших пользователей.

Как не удается выполнить аудит размера DOM Lighthouse

Lighthouse сообщает общее количество элементов DOM для страницы, максимальную глубину DOM страницы и максимальное количество дочерних элементов:

Позволяет избежать чрезмерного размера DOM. Аудит Ligthhouse показывает общее количество элементов DOM, максимальную глубину DOM и максимальное количество дочерних элементов.
Lighthouse выделяет чрезмерные детали размера DOM

Lighthouse помечает страницы с деревьями DOM, которые:

  • Предупреждает, когда элемент тела имеет более ~800 узлов.
  • Ошибки, когда элемент body имеет более ~1400 узлов.

Как оптимизировать размер DOM

В общем, ищите способы создавать узлы DOM только при необходимости и уничтожать узлы, когда они больше не нужны.

Если вы отправляете большое дерево DOM, попробуйте загрузить страницу и вручную отметить, какие узлы отображаются. Возможно, вы сможете удалить неотображаемые узлы из первоначально загруженного документа и создавать их только после соответствующего взаимодействия с пользователем, например прокрутки или нажатия кнопки.

Если вы создаете узлы DOM во время выполнения, точки останова изменения DOM модификации поддерева могут помочь вам точно определить момент создания узлов.

Если вы не можете избежать большого дерева DOM, есть еще один способ улучшить производительность рендеринга — упростить селекторы CSS. Дополнительную информацию см. в статье Google «Уменьшение объема и сложности вычислений стилей» .

Дополнительные сведения см. в статье «Как большие размеры DOM влияют на интерактивность и что с этим можно сделать» .

Рекомендации для конкретного стека

Угловой

Если вы визуализируете большие списки, используйте виртуальную прокрутку с помощью Component Dev Kit (CDK).

Реагировать

  • Используйте «оконную» библиотеку, такую ​​как react-window чтобы минимизировать количество создаваемых узлов DOM, если вы отображаете много повторяющихся элементов на странице.
  • Минимизируйте ненужные повторные рендеринги, используя shouldComponentUpdate , PureComponent или React.memo .
  • Пропускайте эффекты только до тех пор, пока не изменятся определенные зависимости, если вы используете перехватчик Effect для повышения производительности во время выполнения.

Ресурсы