Skip to content
Обучение Измерение Блог Case studies О сайте
Содержание
  • Причины плохих результатов аудита размера DOM в Lighthouse
  • Как оптимизировать размер DOM
  • Инструкции для разных стеков
    • Angular
    • React
  • Ресурсы

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

May 2, 2019 — Обновлено Oct 4, 2019
Available in: Español, 日本語, 한국어, Português, 中文, English
Appears in: Аудиты производительности
Содержание
  • Причины плохих результатов аудита размера DOM в Lighthouse
  • Как оптимизировать размер DOM
  • Инструкции для разных стеков
    • Angular
    • React
  • Ресурсы

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

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

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

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

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

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

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

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

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

Снимок экрана аудита предотвращения чрезмерного размера DOM Lighthouse

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

  • Предупреждение при количестве узлов в элементе body более 800.
  • Ошибка при количестве узлов в элементе body более 1400.
See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

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

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

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

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

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

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

Angular #

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

React #

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

Ресурсы #

  • Исходный код для аудита предотвращения чрезмерного размера DOM
  • Уменьшение объема и сложности расчетов стилей
Память
Последнее обновление: Oct 4, 2019 — Улучшить статью
Return to all articles
Поделиться
подписаться

Contribute

  • Сообщить об ошибке
  • Просмотреть исходный код

Дополнительная информация

  • developer.chrome.com
  • Новости Chrome
  • Web Fundamentals
  • Разборы конкретных случаев
  • Подкасты
  • Шоу

Соцсети

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Все продукты
  • Условия и конфиденциальность
  • Правила сообщества

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.