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

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

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

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

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

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

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

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

Причины плохих результатов аудита размера DOM в Lighthouse #

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

Lighthouse отмечает страницы со следующими деревьями DOM:

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

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

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

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

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

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

Инструкции для разных стеков #

Angular #

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

React #

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

Ресурсы #

• Исходный код для аудита предотвращения чрезмерного размера DOM
• Уменьшение объема и сложности расчетов стилей