Performancë

Madhësia e DOM-it

Sa elemente HTML ka faqja; mbi 1500 shfletuesi nis të ngadalësohet dukshëm.

Çfarë është

DOM-i është pema e objekteve që shfletuesi ndërton nga HTML-ja. Çdo etiketë bëhet një nyje, dhe çdo nyje zë kujtesë dhe kohë përpunimi.

Madhësia e DOM-it matet me numrin e elementeve. Një faqe e ndërtuar mirë ka zakonisht nën 1500. Faqet me lista shumë të gjata, tabela të mëdha ose shabllone me shtresa të tepërta <div> mund të arrijnë dhjetëra mijëra.

Problemi nuk është vetëm numri — është edhe thellësia dhe numri i fëmijëve për nyje. Një pemë e thellë 30 nivele është e shtrenjtë edhe me pak nyje.

Pse ka rëndësi

Kostoja shfaqet në tri vende. Së pari te ndërtimi fillestar: më shumë nyje do të thotë më shumë kujtesë dhe kohë para se faqja të shfaqet.

Së dyti, dhe më rëndë, te çdo ndryshim i mëpasshëm. Kur JavaScript-i ndryshon diçka, shfletuesi duhet të rillogarisë stilet dhe layout-in. Kostoja e asaj llogaritjeje rritet me numrin e nyjeve. Në një faqe me 10.000 elemente, një ndryshim i vogël mund të marrë dhjetëra milisekonda — dhe kjo ndihet si vonesë kur përdoruesi shtyp diçka.

Së treti te kujtesa. Në telefona të lirë, një DOM shumë i madh mund ta bëjë tabin të rrëzohet.

Shkaqet e zakonshme: lista me mijëra rreshta të renderuar njëherësh, dhe shabllone që mbështjellin çdo element në tri <div>-a pa arsye.

Si rregullohet

Mos rendero gjithçka njëherësh. Për lista të gjata, ngarko sipas rrëshqitjes ose përdor faqëzim.
Hiq shtresat e panevojshme. Shumë komponentë mbështjellin çdo element tri herë; zakonisht dy prej tyre janë të tepërta.
Përdor CSS Grid ose Flexbox në vend të <div>-ave të futur njëri brenda tjetrit për layout.
Fshi elementet e fshehura që nuk përdoren. Një modal që rri gjithnjë në DOM me display:none ende kushton.
Kontrollo komponentët e ripërdorshëm. Një <div> i tepërt brenda një komponenti që përsëritet 500 herë bëhet 500 nyje.
Numëroji shpejt me document.querySelectorAll('*').length në konsolë.

Si e mat ky mjet

PerformanceAnalyzer::checkDomSize() (services/PerformanceAnalyzer.php:171) numëron //* — çdo element në dokument. Tri dalje: nën 1500 (kaluar pa konstatim), 1500–3000 (:178, informativ), mbi 3000 (:180, paralajmërim).

Çfarë NUK e mat

Numërohet vetëm numri i elementeve, jo thellësia e pemës dhe jo numri maksimal i fëmijëve për nyje — dy madhësi që ndikojnë po aq te kostoja e layout-it.

Matja bëhet mbi HTML-në fillestare. Elementet që shtohen nga JavaScript-i pas ngarkimit — pra pikërisht rasti i listave të gjata të renderuara nga një aplikacion — nuk numërohen. Një faqe që dërgon një <div> bosh dhe ndërton 20.000 nyje me skript raportohet si e vogël.

Pragjet 1500 dhe 3000 janë konvencione praktike, jo norma; asnjë specifikim nuk i përcakton.

Kodi që e kryen matjen

services/PerformanceAnalyzer.php:171 — PerformanceAnalyzer::checkDomSize
services/PerformanceAnalyzer.php:25 — domElements