DOM (объектная модель документа) — это общее название древовидной структуры HTML-тегов. Его влияние на скорость страницы таково: чем сложнее ваша структура HTML во время рендеринга страницы, тем медленнее будет ваша страница.

По мнению Маяка, сложность Структура DOM измеряется с помощью трех показателей. Чтобы предоставить этим метрикам их ориентиры:

  • Общее количество тегов должно быть меньше, чем 1500
  • Максимальная глубина тега должна быть меньше, чем 32
  • Максимальное количество дочерних тегов должно быть меньше, чем 60

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

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

К факторам, в которых раздутый DOM отрицательно влияет на производительность страницы, относятся:

  • Страницы с большим количеством узлов (тегов) будут испытывать перегрузка сети и сложность загрузки из-за их большого размера, тем самым увеличивая TTFB (время до первого байта).
  • Рендеринг загруженных узлов для создания их позиции и стили требуют времени, тем самым увеличивая FCP (первую содержательную отрисовку).
  • По мере увеличения количества узлов необходимая нагрузка с Манипуляции с JavaScript нагружают память, увеличивая TFT (время взаимодействия).

Чтобы проиллюстрировать оптимизацию DOM на очень простом примере, рассмотрим следующий пример, в котором уменьшено количество и глубина DOM:

<div id="nav-element">
 <ul>
 </ul>
</div>

Вместо этого:

<ul id="nav-element">
</ul>

Это необходимо сделать: два наиболее рекомендуемых метода уменьшения размера DOM — это ленивая загрузка и нумерация страниц. Поскольку структуры карточек на страницах листингов содержат много DOM, предлагается бесконечная прокрутка или нумерация страниц. При принятии решения о количестве элементов в пагинации обязательно следует учитывать критерии измерения DOM. Время, которое обычно считают количество товаров в пагинации 15-20 секунд, но на самом деле эта часть должна рассчитываться на стороне заинтересованного лица, учитывая размер DOM.

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

источники: