Ottimizza le dimensioni del DOM

Connor Clark

Data di pubblicazione: 8 ott 2025

Un DOM di grandi dimensioni può aumentare la durata dei calcoli di stile e dei layout, con ripercussioni sull'adattabilità della pagina. Un DOM di grandi dimensioni aumenta anche l'utilizzo di memoria.

Un albero DOM profondo non è di per sé un problema di prestazioni, ma è un sintomo di pattern di progettazione che utilizzano l'annidamento di elementi non necessari.

Questo approfondimento considera l'intero DOM, comprese le radici shadow. Ignora i nodi DOM che non sono anche elementi. Inoltre, ignora i contenuti di <iframe>.

Cosa fare:

• Elementi totali: il numero complessivo di elementi nel DOM della pagina.
• Profondità DOM: la profondità massima dell'albero DOM.
• Maggior parte dei figli: l'elemento con il maggior numero di elementi secondari.

Come superare questo insight

Questo approfondimento non va a buon fine solo se viene eseguito un ricalcolo di layout o stile di grandi dimensioni che supera una durata di 40 ms.

• Un aggiornamento del layout di grandi dimensioni coinvolge oltre 100 oggetti di layout (che sono approssimativamente elementi).
• Un ricalcolo dello stile di grandi dimensioni interessa più di 300 elementi.

In caso di errore, nel riquadro Rendimento, questo approfondimento evidenzia questi eventi nel grafico a fiamma.

Per ridurre il costo di questi eventi:

• Scopri come misurare il costo dei selettori CSS e ridurre la complessità dello stile.
• Riduci al minimo la profondità del DOM riducendo l'annidamento non necessario.
• Valuta la possibilità di adottare i componenti web per utilizzare Shadow DOM. Anche se non riduce le dimensioni del DOM, riduce il costo dei ricalcoli dello stile.

Indicazioni specifiche per lo stack

Questo approfondimento offre anche indicazioni specifiche per gli stack per le pagine che utilizzano le seguenti tecnologie:

Angular

Se esegui il rendering di elenchi di grandi dimensioni, utilizza lo scorrimento virtuale con Component Dev Kit (CDK).

React

• Utilizza una libreria di "windowing" come react-window per ridurre al minimo il numero di nodi DOM creati se esegui il rendering di tanti elementi ripetuti nella pagina.
• Riduci al minimo i rendering superflui utilizzando shouldComponentUpdate, PureComponent o React.memo.
• Salta gli effetti soltanto fino alla modifica di determinate dipendenze se usi l'hook Effect per migliorare le prestazioni di runtime.

Riferimenti aggiuntivi

• Codice sorgente dell'approfondimento
• In che modo le dimensioni del DOM influiscono sull'interattività e cosa puoi fare al riguardo
• Ridurre al minimo l'adattamento dinamico del contenuto nel browser
• Statistiche dei selettori in Chrome DevTools
• Invalidamento dello stile in Blink
• Misurare il tempo di ricalcolo dello stile nel campo