Gli utenti notano che i siti e le app non funzionano correttamente, quindi l'ottimizzazione delle prestazioni di rendering è fondamentale.
Gli utenti del web odierno si aspettano che le pagine che visitano saranno interattive e fluide, ed è qui che devi dedicare sempre più tempo e risorse. Le pagine non devono limitarsi a caricarsi rapidamente, ma anche rispondere rapidamente agli input degli utenti durante il loro intero ciclo di vita. Infatti, questo aspetto dell'esperienza utente è esattamente ciò che misura la metrica Interaction to Next Paint (INP). Un buon INP indica che una pagina ha risposto in modo coerente e affidabile alle esigenze dell'utente.
Sebbene uno dei componenti principali di ciò che rende una pagina piacevole è 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 collettivamente chiamati rendering, che devono avvenire il più rapidamente possibile affinché l'esperienza utente risulti veloce e affidabile.
Per scrivere pagine in grado di rispondere rapidamente alle interazioni degli utenti, devi capire in che modo il browser gestisce HTML, JavaScript e CSS e assicurarti che il codice che scrivi, e qualsiasi altro codice di terze parti che includi, venga eseguito nel modo più efficiente possibile.
Nota sulla frequenza di aggiornamento dei dispositivi
La maggior parte dei dispositivi oggi aggiorna lo schermo 60 volte al secondo. Ogni aggiornamento genera l'output visivo che vedi ed è comunemente noto come frame. Nel seguente video viene mostrato il concetto di frame:
Sebbene lo schermo di un dispositivo si aggiorni sempre a una frequenza costante, le applicazioni eseguite su un dispositivo potrebbero non essere sempre in grado di produrre abbastanza frame per corrispondere alla frequenza di aggiornamento. Ad esempio, se è in corso un'animazione o una transizione, il browser deve corrispondere alla frequenza di aggiornamento del dispositivo per produrre un frame a ogni aggiornamento dello schermo.
Dato che un display tipico si aggiorna 60 volte al secondo, alcune rapide operazioni matematiche rivelano che il browser ha 16,66 millisecondi per generare ogni frame. In realtà, tuttavia, il browser ha un proprio overhead per ogni frame, quindi tutto il lavoro deve essere completato entro 10 millisecondi. Se non soddisfi questo budget, la frequenza frame diminuisce e i contenuti della pagina oscillano sullo schermo. Questo fenomeno viene spesso chiamato jank.
Tuttavia, gli obiettivi cambiano in base al tipo di lavoro che vuoi svolgere. Il raggiungimento della soglia dei 10 millisecondi è fondamentale per le animazioni, in cui gli oggetti sullo schermo vengono interpolati in una serie di frame tra due punti. Per quanto riguarda i cambiamenti discreti nell'interfaccia utente, ovvero il passaggio da uno stato all'altro senza alcun movimento intermedio, è consigliabile applicare questi cambiamenti in un periodo di tempo che sembra immediato per l'utente. In casi come questi, 100 millisecondi è spesso citato, ma la soglia "buona" della metrica INP è pari o inferiore a 200 millisecondi per poter supportare una gamma più ampia di dispositivi con capacità diverse.
Quali sono 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), capire come funziona la pipeline dei pixel del browser è fondamentale per il tuo lavoro.
La pipeline di pixel
Ci sono cinque aree principali che devi conoscere e tenere presente quando lavori come sviluppatore web. Queste cinque aree sono quelle su cui hai il massimo controllo e ciascuna rappresenta un punto chiave nella pipeline dai pixel allo schermo:
- JavaScript:JavaScript viene generalmente utilizzato per gestire operazioni che comportano modifiche visive all'interfaccia utente. Ad esempio, potrebbe essere la funzione
animatedi jQuery, ordinare un set di dati o aggiungere elementi DOM alla pagina. JavaScript non è strettamente necessario per attivare modifiche visive, tuttavia: le animazioni CSS, le transizioni CSS e l'API web Animations sono in grado di animare i contenuti delle pagine. - Calcoli di stile: è il processo per determinare quali regole CSS vengono applicate 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'attributoclassche contiene una classeheadline. Da qui, una volta note, le regole vengono applicate e vengono calcolati gli stili finali di ogni elemento. - Layout: una volta che il browser ha individuato le regole applicate a un elemento, può iniziare a calcolare la geometria della pagina, ad esempio la quantità di spazio occupata dagli elementi e la posizione in cui questi appaiono sullo schermo. Il modello di layout del web
significa che un elemento può influire sugli altri. Ad esempio, la larghezza dell'elemento
<body>in genere influisce sulle dimensioni degli elementi secondari fino in fondo all'albero, per cui il processo può essere piuttosto complesso per il browser. - Verniciatura:la pittura è il processo di compilazione dei pixel. Prevede l'identificazione di testo, colori, immagini, bordi, ombre e, essenzialmente, ogni aspetto visivo degli elementi dopo il calcolo del relativo layout sulla pagina. Il disegno viene generalmente eseguito su più superfici, spesso chiamate livelli.
- Composito: poiché le parti della pagina sono state potenzialmente disegnate su più livelli, devono essere applicate allo schermo nell'ordine corretto affinché la pagina venga visualizzata come previsto. Ciò è particolarmente importante per gli elementi che si sovrappongono a un altro, poiché un errore potrebbe comportare la visualizzazione errata di un elemento sopra un altro.
Ognuna di queste parti della pipeline di pixel rappresenta un'opportunità per introdurre jank nelle animazioni o ritardare la colorazione 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 di pixel necessarie per il rendering.
Forse hai sentito il termine "rasterizzare" in combinazione con "paint". Questo perché la pittura è in realtà due attività:
- Creazione di un elenco di chiamate di disegno a pagamento.
- Compilazione dei pixel.
La seconda è chiamata "rasterizzazione", pertanto ogni volta che vedi record di colorazione in DevTools, devi considerarli come una rasterizzazione. In alcune architetture, la creazione dell'elenco delle chiamate di disegno e la rasterizzazione viene eseguita su thread diversi, ma questo non è sotto il tuo controllo in qualità di sviluppatore.
Non sempre tocchi ogni parte della pipeline in ogni frame. Infatti, esistono tre modi normalmente per funzionare la pipeline per un determinato frame quando apporti una modifica visiva, con JavaScript, CSS o l'API WebAnimations.
1. JS / CSS > Stile > Layout > Pittura > Composito
Se modifichi una proprietà "layout", ad esempio quella che cambia la geometria di un elemento come larghezza, altezza o posizione (come le proprietà CSS left o top), il browser deve controllare tutti gli altri elementi ed eseguire l'adattamento dinamico del contenuto della pagina. Le eventuali aree interessate dovranno essere ridipinte e gli elementi finali dipinti dovranno essere nuovamente compositi.
2. JS / CSS > Stile > Paint > Composito
Se hai modificato una proprietà "solo vernice" per un elemento in CSS, ad esempio proprietà come background-image, color o box-shadow, il passaggio del layout non è necessario per eseguire un aggiornamento visivo della pagina. L'omissione del passaggio del layout, ove possibile, eviti il lavoro di layout potenzialmente costoso che avrebbe altrimenti contribuito 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 colorazione, il browser può passare direttamente al passaggio di composizione. Questo è il percorso più economico e desiderabile attraverso la pipeline di pixel per i punti ad alta pressione nel ciclo di vita di una pagina, ad esempio animazioni o scorrimento. Curiosità: Chromium ottimizza lo scorrimento della pagina in modo che avvenga solo nel thread del compositore, ove possibile, il che significa che anche se una pagina non risponde, puoi comunque scorrere la pagina e vederne parti che in precedenza erano visualizzate sullo schermo.
Le prestazioni sul web sono l'arte di evitare il lavoro e di aumentare il più possibile l'efficienza di qualsiasi lavoro necessario. In molti casi, si tratta di lavorare con il browser, non contro di esso. È importante tenere presente che il lavoro mostrato in precedenza nella pipeline varia in termini di costo di calcolo; alcune attività sono intrinsecamente più costose di altre.
Esaminiamo le diverse parti della pipeline. Vedremo i problemi più comuni, nonché come diagnosticarli e risolverli.
Ottimizzazioni del rendering del browser
Le prestazioni sono importanti per gli utenti e, per creare esperienze utente positive, gli sviluppatori web devono creare siti web che reagiscano rapidamente alle interazioni degli utenti e funzionino in modo fluido. L'esperto di prestazioni Paul Lewis è a tua disposizione per aiutarti a distruggere jank e creare app web con prestazioni di 60 frame al secondo. Lascerai questo corso con gli strumenti necessari per profilare le app e identificherai le cause di prestazioni di rendering non ottimali. Esplorerai inoltre la pipeline di rendering del browser e scoprirai dei pattern che semplificano la creazione di siti web veloci che gli utenti apprezzeranno.
Questo è un corso senza costi offerto da Udacity e puoi seguirlo in qualsiasi momento.