Prestazioni di rendering

Gli utenti si accorgono se i siti e le app non funzionano bene, quindi l'ottimizzazione delle prestazioni di rendering è fondamentale.

Paul Lewis

Gli utenti del web di oggi si aspettano che le pagine che visitano siano interattive e fluide, ed è qui che devi concentrare sempre di più il tuo tempo e i tuoi sforzi. Le pagine non devono solo caricarsi rapidamente, ma anche rispondere rapidamente all'input utente durante l'intero ciclo di vita. In effetti, questo aspetto dell'esperienza utente è proprio ciò che misura la metrica Interaction to Next Paint (INP). Un buon INP indica che una pagina è stata costantemente e affidabilmente reattiva alle esigenze dell'utente.

Sebbene un componente importante di ciò che rende una pagina scattante sia la quantità di JavaScript che esegui in risposta alle interazioni degli utenti, ciò che gli utenti si aspettano sono modifiche visive all'interfaccia utente. Le modifiche visive a un'interfaccia utente sono il risultato di diversi tipi di lavoro, spesso definiti collettivamente rendering, e questo lavoro deve essere eseguito il più rapidamente possibile in modo che l'esperienza utente sia veloce e affidabile.

Per scrivere pagine che rispondono rapidamente alle interazioni degli utenti, devi capire come HTML, JavaScript e CSS vengono gestiti dal browser e assicurarti che il codice che scrivi, così come qualsiasi altro codice di terze parti che includi, venga eseguito nel modo più efficiente possibile.

Nota sulle frequenze di aggiornamento dei dispositivi

La frequenza di aggiornamento di un display è un aspetto importante da considerare quando si creano siti web che sembrano reattivi all'input dell'utente.

La maggior parte dei dispositivi attuali aggiorna lo schermo 60 volte al secondo. Ogni aggiornamento produce l'output visivo che vedi ed è comunemente noto come frame. Nel video seguente viene illustrato il concetto di frame:

Frame mostrati nel riquadro Prestazioni di Chrome DevTools. Mentre il cursore scorre sulla sequenza nella parte superiore, viene mostrata una rappresentazione ingrandita di ogni frame all'interno di un tooltip mentre un menu di navigazione mobile si anima per passare allo stato "aperto".

Anche se lo schermo di un dispositivo si aggiorna sempre a una frequenza costante, le applicazioni eseguite su un dispositivo potrebbero non essere sempre in grado di produrre un numero di frame sufficiente per corrispondere a quella frequenza di aggiornamento. Ad esempio, se è in esecuzione un'animazione o una transizione, il browser deve corrispondere alla frequenza di aggiornamento del dispositivo per produrre un frame per ogni aggiornamento dello schermo.

Dato che un display tipico si aggiorna 60 volte al secondo, un rapido calcolo rivelerebbe che il browser ha 16,66 millisecondi per produrre ogni frame. In realtà, però, il browser ha un proprio overhead per ogni frame, quindi tutto il tuo lavoro deve essere completato entro 10 millisecondi. Se non rispetti questo budget, la frequenza fotogrammi diminuisce e i contenuti della pagina tremano sullo schermo. Questo fenomeno è spesso chiamato jank.

Tuttavia, i target cambiano in base al tipo di lavoro che stai cercando di svolgere. Il rispetto della soglia di 10 millisecondi è fondamentale per le animazioni, in cui gli oggetti sullo schermo vengono interpolati in una serie di frame tra due punti. Quando si tratta di modifiche discrete nell'interfaccia utente, ovvero il passaggio da uno stato all'altro senza alcun movimento intermedio, è consigliabile apportare queste modifiche in un periodo di tempo che sembra istantaneo all'utente. In casi come questi, 100 millisecondi è un valore citato spesso, ma la soglia "buona" della metrica INP è pari o inferiore a 200 millisecondi per adattarsi a una gamma più ampia di dispositivi con funzionalità diverse.

Qualunque siano i tuoi obiettivi, che si tratti di produrre i numerosi frame richiesti dalle animazioni per evitare jank o semplicemente di produrre una modifica visiva discreta nell'interfaccia utente il più rapidamente possibile, comprendere il funzionamento della pipeline di pixel del browser è essenziale per il tuo lavoro.

La pipeline dei pixel

Ci sono cinque aree principali che devi conoscere e tenere presente nel tuo lavoro di sviluppatore web. Queste cinque aree sono quelle su cui hai il maggior controllo e ognuna rappresenta un punto chiave nella pipeline di conversione dei pixel in immagini sullo schermo:

Illustrazione della pipeline completa dei pixel.

• JavaScript: JavaScript viene in genere utilizzato per gestire il lavoro che comporterà modifiche visive all'interfaccia utente. Ad esempio, potrebbe trattarsi della funzione animate di jQuery, dell'ordinamento di un set di dati o dell'aggiunta di elementi DOM alla pagina. Tuttavia, JavaScript non è strettamente necessario per attivare le modifiche visive: le animazioni CSS, le transizioni CSS e l'API Web Animations sono in grado di animare i contenuti delle pagine.
• Calcoli degli stili: questo è il processo per determinare quali regole CSS si applicano a quali elementi HTML in base ai selettori corrispondenti. Ad esempio, .headline è un esempio di selettore CSS che si applica a qualsiasi elemento HTML con un valore dell'attributo class che contiene una classe di headline. Da lì, una volta note le regole, vengono applicate e vengono calcolati gli stili finali per ogni elemento.
• Layout: una volta che il browser sa quali regole si applicano a un elemento, può iniziare a calcolare la geometria della pagina, ad esempio lo spazio occupato dagli elementi e la loro posizione sullo schermo. Il modello di layout del web prevede che un elemento possa influire su altri. Ad esempio, la larghezza dell'elemento <body> in genere influisce sulle dimensioni dei suoi elementi secondari in tutto l'albero, quindi il processo può essere piuttosto complesso per il browser.
• Colorazione: la colorazione è il processo di riempimento dei pixel. Comporta la visualizzazione di testo, colori, immagini, bordi, ombre e, in sostanza, ogni aspetto visivo degli elementi dopo che è stato calcolato il loro layout sulla pagina. Il disegno viene in genere eseguito su più superfici, spesso chiamate livelli.
• Composizione: poiché le parti della pagina sono state potenzialmente disegnate su più livelli, devono essere applicate allo schermo nell'ordine corretto in modo che la pagina venga visualizzata come previsto. Questo è particolarmente importante per gli elementi che si sovrappongono, poiché un errore potrebbe comportare la visualizzazione errata di un elemento sopra un altro.

Ognuna di queste parti della pipeline dei pixel rappresenta un'opportunità per introdurre jank nelle animazioni o ritardare la visualizzazione dei frame anche per modifiche visive discrete all'interfaccia utente. È quindi importante capire esattamente quali parti della pipeline vengono attivate dal codice e verificare se è possibile limitare le modifiche solo alle parti della pipeline dei pixel necessarie per il rendering.

Potresti aver sentito il termine "rasterizzare" utilizzato insieme a "disegnare". Questo perché la pittura è in realtà composta da due attività:

1. Creazione di un elenco di chiamate di disegno.
2. Riempimento dei pixel in corso…

Quest'ultima è chiamata "rasterizzazione", quindi ogni volta che vedi i record di disegno in DevTools, devi pensare che includano la rasterizzazione. In alcune architetture, la creazione dell'elenco delle chiamate di disegno e la rasterizzazione vengono eseguite su thread diversi, ma questo non è sotto il tuo controllo in qualità di sviluppatore.

Non è sempre necessario toccare ogni parte della pipeline su ogni frame. In effetti, esistono tre modi in cui la pipeline si svolge normalmente per un determinato frame quando apporti una modifica visiva, con JavaScript, CSS o l'API Web Animations.

1. JS/CSS > Stile > Layout > Paint > Composizione

Se modifichi una proprietà "layout", ad esempio una che modifica la geometria di un elemento, come larghezza, altezza o posizione (ad esempio le proprietà CSS left o top), il browser deve controllare tutti gli altri elementi ed eseguire il "reflow" della pagina. Le aree interessate dovranno essere ridipinte e gli elementi dipinti finali dovranno essere ricomposti.

2. JS/CSS > Stile > Paint > Composizione

Se hai modificato una proprietà "paint-only" per un elemento in CSS, ad esempio proprietà come background-image, color o box-shadow, il passaggio di layout non è necessario per eseguire il commit di un aggiornamento visivo della pagina. Omettendo il passaggio di layout, ove possibile, eviti un lavoro di layout potenzialmente costoso che altrimenti avrebbe potuto contribuire a una latenza significativa nella produzione del frame successivo.

3. JS/CSS > Stile > Composito

Se modifichi una proprietà che non richiede né il layout né la visualizzazione, il browser può passare direttamente al passaggio di composizione. Questo è il percorso più economico e più desiderabile attraverso la pipeline dei pixel per i punti di alta pressione nel ciclo di vita di una pagina, come le animazioni o lo scorrimento. Curiosità: Chromium ottimizza lo scorrimento della pagina in modo che avvenga esclusivamente sul thread del compositore, ove possibile, il che significa che anche se una pagina non risponde, puoi comunque scorrerla e visualizzare le parti che erano state precedentemente disegnate sullo schermo.

Nota: se vuoi un percorso rapido per creare animazioni ad alte prestazioni, leggi Utilizza solo le proprietà del compositore e gestisci il numero di livelli.

Le prestazioni web sono l'arte di evitare il lavoro, aumentando al contempo l'efficienza di qualsiasi lavoro necessario il più possibile. In molti casi, si tratta di lavorare con il browser, non contro di esso. Vale la pena tenere presente che il lavoro mostrato in precedenza nella pipeline differisce in termini di costo di calcolo; alcune attività sono intrinsecamente più costose di altre.

Esaminiamo le diverse parti della pipeline. Esamineremo i problemi comuni e come diagnosticarli e risolverli.

Ottimizzazioni del rendering del browser

Le prestazioni sono importanti per gli utenti e, per creare esperienze utente di qualità, gli sviluppatori web devono creare siti web che reagiscano rapidamente alle interazioni degli utenti e vengano visualizzati senza problemi. L'esperto di prestazioni Paul Lewis è qui per aiutarti a eliminare i jank e creare app web che mantengono prestazioni di 60 frame al secondo. Al termine di questo corso, avrai gli strumenti necessari per profilare le app e identificare le cause di prestazioni di rendering non ottimali. Esplorerai anche la pipeline di rendering del browser e scoprirai pattern che semplificano la creazione di siti web veloci e piacevoli da usare per gli utenti.

Questo è un corso senza costi offerto tramite Udacity e puoi seguirlo in qualsiasi momento.