Избегайте чрезмерного размера 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 «Сокращение объёма и сложности расчётов стилей» .

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

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

Угловой

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

Реагировать

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

Ресурсы

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