Evita un DOM di dimensioni eccessive

Un albero DOM di grandi dimensioni può rallentare le prestazioni della pagina in diversi modi:

  • Efficienza della rete e prestazioni di carico

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

  • Prestazioni durante la fase di runtime

    Man mano che utenti e script interagiscono con la tua pagina, il browser deve costantemente ricalcolare la posizione e lo stile dei nodi. Un albero DOM di grandi dimensioni in combinazione con regole di stile complesse può rallentare notevolmente il rendering.

  • Prestazioni della memoria

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

Problemi con il controllo delle dimensioni del DOM di Lighthouse

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

Uno screenshot di Lighthouse evita un controllo delle dimensioni del DOM eccessive

Lighthouse segnala le pagine con alberi DOM che:

  • Avvisa quando l'elemento body ha più di circa 800 nodi.
  • Errori quando l'elemento body ha più di ~1400 nodi.

Come ottimizzare le dimensioni del DOM

In generale, cerca modi per creare nodi DOM solo quando necessario ed eliminare i nodi quando non sono più necessari.

Se al momento invii un albero DOM di grandi dimensioni, prova a caricare la pagina e a notare manualmente quali nodi vengono visualizzati. Puoi anche rimuovere i nodi non visualizzati dal documento caricato inizialmente e crearli solo dopo un'interazione utente pertinente, ad esempio lo scorrimento o il clic su un pulsante.

Se crei nodi DOM in fase di runtime, i punti di interruzione della modifica del DOM per la modifica di un sottoalbero possono aiutarti a individuare quando vengono creati i nodi.

Se non è possibile evitare una struttura DOM di grandi dimensioni, un altro approccio per migliorare le prestazioni del rendering è la semplificazione dei selettori CSS. Per ulteriori informazioni, consulta Ridurre l'ambito e la complessità dei calcoli degli stili di Google.

Indicazioni specifiche per lo stack

Angular

Se vuoi eseguire il rendering di elenchi di grandi dimensioni, utilizza lo scorrimento virtuale con il Componente 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 molti elementi ripetuti nella pagina.
  • Riduci al minimo le ripetizioni del rendering non necessarie utilizzando shouldComponentUpdate, PureComponent o React.memo.
  • Salta gli effetti solo fino a quando alcune dipendenze non sono cambiate se utilizzi l'hook Effect per migliorare le prestazioni di runtime.

Risorse