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

Коннор Кларк
Connor Clark
X GitHub

Опубликовано: 8 октября 2025 г.

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

Глубокое дерево DOM само по себе не является проблемой производительности, однако это симптом шаблонов проектирования, которые используют ненужную вложенность элементов .

Этот анализ учитывает всю DOM, включая теневые корневые элементы. Он игнорирует узлы DOM, которые не являются элементами. Он также игнорирует содержимое <iframe> .

На что обратить внимание:

  • Всего элементов : общее количество элементов в DOM вашей страницы.
  • Глубина DOM : максимальная глубина дерева DOM.
  • Наибольшее количество дочерних элементов : элемент с наибольшим количеством дочерних элементов.

Как передать это понимание

Этот подход не работает только в случае большого пересчета макета или стиля, длительность которого превышает 40 мс.

  • Крупное обновление макета затрагивает более 100 объектов макета (которые можно условно назвать элементами).
  • Масштабный перерасчет стилей затронул более 300 элементов.

В случае неудачи на панели «Производительность» эта информация выделяет эти события на диаграмме пламени.

Чтобы снизить стоимость этих мероприятий:

Руководство по конкретному стеку

Эта информация также предлагает рекомендации, специфичные для стека, для страниц, использующих следующие технологии:

Угловой

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

Реагировать

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

Дополнительные ссылки