Prestazioni di rendering

Gli utenti notano che i siti e le app non funzionano bene, quindi ottimizzare le prestazioni del rendering è fondamentale.

Paul Lewis

Gli utenti del web odierno si aspettano che le pagine visitate siano interattive e ed è qui che devi dedicare sempre più tempo e impegno. Le pagine non devono solo caricarsi rapidamente, ma anche rispondere rapidamente all'input degli utenti durante l'intero ciclo di vita. Di fatto, questo aspetto dell'esperienza utente è esattamente ciò che misura la metrica Interazione con Next Paint (INP). Un buon INP indica che una pagina è stata reattiva in modo coerente e affidabile al e alle esigenze aziendali.

Mentre un componente importante di ciò che rende una pagina più rapida riguarda la quantità di codice JavaScript eseguito in risposta alle interazioni degli utenti, prevedono cambiamenti visivi all'interfaccia utente. Modifiche visive per un utente sono il risultato di diversi tipi di lavoro, spesso collettivamente indicati fino al rendering, che deve avvenire il più rapidamente possibile, l'esperienza utente sia veloce e affidabile.

Per scrivere pagine che rispondano rapidamente alle interazioni degli utenti, devi conoscere come HTML, JavaScript e CSS vengono gestiti dal browser e fanno in modo che il codice che scrivi, nonché qualsiasi altro codice di terze parti che includi, viene eseguito nel modo più efficiente possibile.

Nota sulle frequenze di aggiornamento del dispositivo

. La frequenza di aggiornamento di un display è un fattore importante ai fini creando siti web reattivi all'input degli utenti.

Oggi, la maggior parte dei dispositivi aggiorna lo schermo 60 volte al secondo. A ogni aggiornamento produce l'output visivo che vedi ed è comunemente noto come frame. Nella seguente video, viene dimostrato il concetto di frame:

Frame come mostrato nel riquadro delle prestazioni di Chrome DevTools. Quando il cursore scrub sulla pellicola in alto, una rappresentazione ingrandita di ogni frame viene mostrato all'interno di una descrizione comando mentre un menu di navigazione mobile si anima "aperta" stato.

Anche se lo schermo di un dispositivo si aggiorna sempre a una frequenza costante, le applicazioni su un dispositivo potrebbero non essere necessariamente in grado di produrre un numero sufficiente di fotogrammi corrispondono alla frequenza di aggiornamento. Ad esempio, in presenza di un'animazione o di una transizione in esecuzione, il browser deve corrispondere alla frequenza di aggiornamento del dispositivo per ogni volta che viene aggiornata la schermata.

Dato che un tipico display si aggiorna 60 volte al secondo, alcuni calcoli matematici rivelerebbe che il browser ha 16,66 millisecondi per produrre ogni frame. In realtà, però, il browser ha il proprio overhead per ogni frame, quindi il tuo lavoro deve essere completato entro 10 millisecondi. Quando non riesci a soddisfare questo budget, la frequenza fotogrammi cala e si verificano problemi di visualizzazione dei contenuti della pagina sullo schermo. Questo comunemente chiamato jank.

Tuttavia, i tuoi target cambiano in base al tipo di lavoro che ti interessa. Soddisfare la soglia dei 10 millisecondi è fondamentale per le animazioni, in cui di oggetti sullo schermo vengono interpolati in una serie di fotogrammi tra due punti. Per quanto riguarda i cambiamenti discreti nell'interfaccia utente, di spostarsi da uno stato all'altro senza che vi sia alcun movimento intermedio, di eseguire queste modifiche in un arco di tempo che sembra istantaneo per per l'utente. In questi casi, 100 millisecondi è una cifra molto citata, ma il valore "buono" della metrica INP di soglia è pari o inferiore a 200 millisecondi per possono ospitare una gamma più ampia di dispositivi con capacità diverse.

Quali siano i tuoi obiettivi, che si tratti di produrre i numerosi fotogrammi in cui le animazioni per evitare i jank o semplicemente per produrre un discreto cambiamento visivo l'interfaccia utente il più rapidamente possibile, comprendendo come è essenziale per il tuo lavoro.

La pipeline di pixel

Ci sono cinque aree principali che devi conoscere e tenere presente nel tuo lavorare come sviluppatore web. Queste cinque aree sono quelle che e ognuno di questi rappresenta un punto chiave nella pipeline dai pixel allo schermo:

. L'intera pipeline di pixel, illustrata.

• JavaScript:in genere JavaScript viene utilizzato per gestire il lavoro che modifiche visive all'interfaccia utente. Potrebbe trattarsi, ad esempio, di jQuery animate, ordinare un set di dati o aggiungere elementi DOM alla pagina. Tuttavia, JavaScript non è strettamente necessario per attivare le modifiche visive: CSS le animazioni, le transizioni CSS e l'API Web Animations animare i contenuti della pagina.
• Calcoli dello stile: è la procedura per individuare quali regole CSS applicabili 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 di attributo class che contiene una classe di headline. Da Una volta note le regole, vengono applicate e gli stili finali per ogni vengono calcolati.
• Layout: quando il browser sa quali regole si applicano a un elemento, può iniziare a calcolare la geometria della pagina, ad esempio la quantità di spazi tra gli elementi e la posizione in cui appaiono sullo schermo. Il modello di layout del web significa che un elemento possa influire sugli altri. Ad esempio, la larghezza dell'elemento <body> in genere influisce sulle dimensioni degli elementi secondari completamente e più in basso nell'albero, quindi il processo può essere molto coinvolto per il browser.
• Pittura: la pittura è il processo di riempimento dei pixel. Si tratta di disegnare testo, colori, immagini, bordi, ombre e, essenzialmente, ogni elemento l'aspetto degli elementi dopo che è stato calcolato il loro layout sulla pagina. In genere il disegno viene realizzato su più superfici, spesso chiamate strati.
• Composito: dato che le parti della pagina sono state potenzialmente tracciate devono essere applicati allo schermo nell'ordine corretto in modo che che la pagina venga visualizzata come previsto. Ciò è particolarmente importante per gli elementi che si sovrappongono a un altro, perché un errore potrebbe far apparire un elemento sopra un altro in modo errato.

Ognuna di queste parti della pipeline di pixel rappresenta un'opportunità per introdurre si interrompono nelle animazioni o ritardano la colorazione dei fotogrammi anche per elementi visivi discreti modifiche all'interfaccia utente. È quindi importante capire esattamente le parti della pipeline attivate dal codice e verificare se puoi limitare le modifiche solo alle parti della pipeline di pixel necessarie per eseguire il rendering.

Probabilmente hai già sentito il termine "rasterizzare" utilizzata insieme a "paint". Questo è che la pittura è in realtà due attività:

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

Quest'ultima è chiamata "rasterizzazione", quindi ogni volta che vedi record DevTools, dovresti considerare questa funzionalità come una rasterizzazione. In alcuni di architetture, la creazione dell'elenco delle chiamate di disegno e la rasterizzazione avviene thread diversi, ma questo non è controllato dal tuo controllo come sviluppatore.

Non dovrai necessariamente toccare sempre ogni parte della pipeline su ogni frame. In effetti, ci sono tre modi in cui la pipeline normalmente viene riprodotta per un determinato frame quando apporti una modifica visiva, con JavaScript, CSS o API Animations.

1. JS / CSS > Stile > Layout > Verniciatura > Composito

Se modifichi un "layout" , come quella che modifica la proprietà di un elemento Geometria come larghezza, altezza o posizione (come il CSS left o top proprietà), il browser deve controllare tutti gli altri elementi ed eseguire l'"adattamento dinamico del contenuto" il . Eventuali aree interessate dovranno essere riverniciate e la verniciatura finale gli elementi dovranno essere riassunti insieme.

2. JS / CSS > Stile > Verniciatura > Composito

Se hai modificato un'immagine per un elemento in CSS, ad esempio come background-image, color o box-shadow: il passaggio del layout non è necessario per eseguire il commit di un aggiornamento visivo della pagina. Omettendo il layout dove possibile, per evitare lavori di layout potenzialmente costosi che potrebbero altrimenti ha 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 puoi passare direttamente al passaggio di composizione. È il modello più economico e percorso desiderabile attraverso la pipeline di pixel per i punti di alta pressione in una il ciclo di vita di una pagina, come animazioni o scorrimento. Curiosità: Chromium ottimizza lo scorrimento della pagina in modo che si verifichi solo sul thread del compositore, possibile, ovvero se una pagina non risponde, potrai comunque scorrere la pagina e visualizzarne le parti precedentemente disegnate sullo schermo.

Nota: se vuoi che la traccia sia veloce per ottenere prestazioni elevate animazioni, leggi Bacchetta alle proprietà solo del compositore e di gestire il conteggio dei livelli.

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

Approfondiamo le diverse parti della pipeline. Lo esamineremo risolvere 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 Devi creare siti web che reagiscano rapidamente alle interazioni degli utenti e che senza intoppi. L'esperto di prestazioni Paul Lewis è qui per aiutarti a distruggere jank e creano app web che mantengono prestazioni a 60 frame al secondo. Uscirai questo corso illustra gli strumenti necessari per profilare le app e identificare le cause con prestazioni di rendering non ottimali. Esplorerai inoltre il rendering del browser pipeline di dati e scoprire pattern che semplificano la creazione di siti web veloci piacerà agli utenti.

Si tratta di un corso senza costi offerto da Udacity e puoi seguirlo in qualsiasi momento.