Evita un DOM di dimensioni eccessive

Un grande albero DOM può rallentare le prestazioni della pagina in diversi modi:

• Efficienza della rete e prestazioni di caricamento

  Un'ampia struttura DOM spesso include molti nodi che non sono visibili quando l'utente carica la pagina per la prima volta, il che aumenta inutilmente i costi di dati per gli utenti e rallenta il tempo di caricamento.

• Prestazioni di runtime

  Quando gli utenti e gli script interagiscono con la tua pagina, il browser deve costantemente ricomputare la posizione e lo stile dei nodi. Un albero DOM di grandi dimensioni in combinazione con regole di stile complicate può rallentare notevolmente il rendering e l'interattività.

• Rendimento della memoria

  Se JavaScript utilizza selettori di query generali come document.querySelectorAll('li'), è possibile che tu stia inconsapevolmente archiviando riferimenti a un numero molto elevato di nodi, il che può sovraccaricare le capacità di memoria dei dispositivi degli utenti.

Perché il controllo delle dimensioni del DOM di Lighthouse non va a buon fine

Lighthouse segnala gli elementi DOM totali di una pagina, la profondità DOM massima della pagina e i relativi elementi secondari massimi:

Lighthouse segnala le pagine con alberi DOM che:

• Mostra un avviso quando l'elemento body contiene più di circa 800 nodi.
• Errori quando l'elemento body contiene più di circa 1400 nodi.

Come ottimizzare le dimensioni del DOM

In generale, cerca modi per creare nodi DOM solo quando necessario e distruggili quando non sono più necessari.

Se devi spedire un albero DOM di grandi dimensioni, prova a caricare la pagina e a annotare manualmente i nodi visualizzati. Forse puoi rimuovere i nodi non visualizzati dal documento caricato inizialmente e crearli solo dopo un'interazione utente pertinente, ad esempio uno scorrimento o il clic di un pulsante.

Se crei nodi DOM in fase di runtime, i punti di interruzione modifica del DOM di modifica del sottoalbero possono aiutarti a individuare il momento in cui vengono creati i nodi.

Se non puoi evitare un albero DOM di grandi dimensioni, un altro approccio per migliorare le prestazioni di rendering è quello di semplificare i selettori CSS. Per ulteriori informazioni, consulta la pagina Ridurre l'ambito e la complessità dei calcoli degli stili di Google.

Per maggiori dettagli, consulta l'articolo In che modo le dimensioni del DOM influiscono sull'interattività e cosa puoi fare in merito.

Indicazioni specifiche per lo stack

Angular

Se esegui il rendering di elenchi di grandi dimensioni, utilizza lo scorrimento virtuale con il 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 il rendering non necessario utilizzando shouldComponentUpdate, PureComponent o React.memo.
• Salta gli effetti solo fino alla modifica di determinate dipendenze se utilizzi l'hook Effect per migliorare le prestazioni di runtime.

Risorse

• Codice sorgente per l'audit Evita di usare un DOM di dimensioni eccessive
• Ridurre l'ambito e la complessità dei calcoli degli stili