DOM (құжат нысанының үлгісі) HTML тегтерінің ағаш құрылымының жалпы атауы. Оның бет жылдамдығына әсері бетті көрсету кезінде HTML құрылымы неғұрлым күрделі болса, бет соғұрлым баяу болады.
Маяктың айтуынша, күрделілігі DOM құрылымы үш көрсеткіш арқылы өлшенеді. Бұл көрсеткіштерді олардың сілтеме нүктелерімен қамтамасыз ету үшін:
- Тегтердің жалпы саны болуы керек 1500-тен азырақ
- Тегтің максималды тереңдігі болуы керек 32-тен азырақ
- Еншілес тегтердің максималды саны болуы керек 60-тен азырақ
Жоғарыда келтірілген мысалда тегтердің жалпы саны нашар, ең үлкен тег тереңдігі жақсы, бірақ еншілес тегтердің ең көп саны нашар.
DOM элементтерін оңтайландыру толығымен фронтенд мүдделі тараптың жауапкершілігі болып табылады. Бет коды алғаш рет жасалған кезде кездейсоқ немесе ерікті түрде таңдалған әрбір тегтің жоба аяқталғаннан кейін құны болады. Сондықтан біз барлық frontend әзірлеушілерін үнсіздік сәтіне және көздерін ашуға шақырамыз.
Толтырылған 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 көлемін үлкейтетінін білуіңіз керек.
Дерек көздері:
