Evita un DOM di dimensioni eccessive

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

• Efficienza di rete e prestazioni di carico

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

• Prestazioni di runtime

  Man mano che gli utenti e gli script interagiscono con la 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 complicate può rallentare notevolmente il rendering e l'interattività.

• Prestazioni della memoria

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

Come non supera il controllo delle dimensioni del DOM di Lighthouse

Lighthouse indica il numero totale di elementi DOM per una pagina, la profondità massima del DOM della pagina e il numero massimo di elementi secondari:

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 circa 1400 nodi.

Come ottimizzare le dimensioni del DOM

In generale, cerca modi per creare nodi DOM solo quando necessario e distruggili quando non ne hai più bisogno.

Se stai inviando un albero DOM di grandi dimensioni, prova a caricare la pagina e a prendere nota manualmente dei nodi visualizzati. Forse puoi rimuovere i nodi non visualizzati dal documento caricato inizialmente e crearli solo dopo un'interazione utente pertinente, come uno scorrimento o un clic su un pulsante.

Se crei nodi DOM in fase di runtime, i punti di interruzione per la modifica del DOM dell'albero secondario 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 è semplificare i selettori CSS. Per ulteriori informazioni, consulta la sezione Ridurre l'ambito e la complessità dei calcoli dello stile di Google.

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

Indicazioni specifiche per lo stack

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.

Risorse

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