DOM (об'єктна модель документа) це загальна назва деревоподібної структури тегів HTML. Його вплив на швидкість сторінки такий, що чим складнішою є ваша структура HTML під час відтворення сторінки, тим повільнішою буде ваша сторінка.
За словами Lighthouse, складність в Структура DOM вимірюється за допомогою трьох показників. Щоб надати ці показники з їх контрольними точками:
- Загальна кількість тегів має бути менше, ніж 1500
- Максимальна глибина мітки має бути менше, ніж 32
- Має бути максимальна кількість дочірніх тегів менше, ніж 60
У наведеному вище прикладі загальна кількість тегів незадовільна, максимальна глибина тегів задовільна, але максимальна кількість дочірніх тегів задовільна.
Оптимізація елементів DOM – це повна відповідальність зацікавленої сторони інтерфейсу. Кожен тег, обраний випадковим чином або довільно під час першого створення коду сторінки, має вартість після завершення проекту. Тому ми запрошуємо всіх фронтенд-розробників хвилиною мовчання та відкрити очі.
Точки, де роздутий DOM негативно впливає на продуктивність сторінки, включають:
- Сторінки з великою кількістю вузлів (тегів) будуть відчувати перевантаження мережі та труднощі завантаження через їх великий розмір, таким чином збільшуючи TTFB (час до першого байта).
- Рендеринг завантажених вузлів для створення їхні позиції та стилі потребують часу, таким чином збільшуючи FCP (First Contentful Paint).
- У міру збільшення кількості вузлів необхідне навантаження с Маніпуляції JavaScript навантажують пам'ять, збільшення TFT (Time to Interactive).
Щоб проілюструвати оптимізацію DOM на дуже простому прикладі, розглянемо наступне, де і кількість, і глибина DOM зменшуються:
<div id="nav-element">
<ul>
</ul>
</div>Замість цього:
<ul id="nav-element">
</ul>
Це необхідно зробити: Два найбільш рекомендованих методу зменшення розміру DOM – це відкладене завантаження та розбиття на сторінки. Оскільки структури карток на сторінках зі списком містять багато DOM, пропонується нескінченне прокручування або розбивка на сторінки. Вирішуючи кількість елементів у розбивці на сторінки, обов’язково слід враховувати критерії вимірювання DOM. Зазвичай розглядається час кількість товарів у пагінації 15-20 секунд, але ця частина насправді має бути розрахована на стороні зацікавленої сторони інтерфейсу, враховуючи розмір DOM.
Одне з дуже простих рішень — не додавати елементи які не видно на сторінці в HTML, не приховуючи їх за допомогою CSS. Якщо елемент потрібно відобразити, його слід викликати пізніше та показати користувачеві. Ви повинні знати, що приховування елементів за допомогою CSS збільшує DOM.
джерела:
