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.

Източници: