Funzionamento interno di un processo di rendering
Questa è la terza parte di una serie di 4 post del blog che illustrano il funzionamento dei browser. In precedenza, abbiamo trattato l'architettura multiprocesso e il flusso di navigazione. In questo post esamineremo cosa succede all'interno del processo del renderer.
Il processo del renderer interessa molti aspetti del rendimento web. Poiché all'interno del processo di rendering avviene molto, questo post è solo una panoramica generale. Per approfondire, consulta la sezione sul rendimento di Web Fundamentals, che contiene molte altre risorse.
I processi di rendering gestiscono i contenuti web
Il processo del visualizzatore è responsabile di tutto ciò che accade all'interno di una scheda. In un processo di rendering, il thread principale gestisce la maggior parte del codice inviato all'utente. A volte parti del codice JavaScript vengono gestite da thread di lavoro se utilizzi un web worker o un service worker. I thread di compositore e raster vengono eseguiti anche all'interno di processi di rendering per eseguire il rendering di una pagina in modo efficiente e senza problemi.
Il compito principale del processo di rendering è trasformare HTML, CSS e JavaScript in una pagina web con cui l'utente può interagire.
Analisi
Costruzione di un DOM
Quando il processo di rendering riceve un messaggio di commit per una navigazione e inizia a ricevere dati HTML, il thread principale inizia ad analizzare la stringa di testo (HTML) e a trasformarla in un Modelo di Objecti Documento (DOM).
Il DOM è la rappresentazione interna della pagina di un browser, nonché la struttura di dati e l'API con cui lo sviluppatore web può interagire tramite JavaScript.
L'analisi di un documento HTML in un DOM è definita dall'HTML Standard. Potresti aver notato che l'inserimento di HTML in un browser
non genera mai un errore. Ad esempio, il tag di chiusura
Hi! I'm Chrome! (il tag b è chiuso prima del tag i) viene trattato come se avessi scritto Hi! I'm Chrome!. Questo perché la specifica HTML è progettata per gestire questi errori in modo elegante. Se vuoi scoprire come vengono eseguite queste operazioni, consulta la sezione "Introduzione alla gestione degli errori e casi insoliti nel parser" della specifica HTML.
Caricamento delle risorse secondarie
Un sito web di solito utilizza risorse esterne come immagini, CSS e JavaScript. Questi file devono essere caricati dalla rete o dalla cache. Il thread principale potrebbe richiederli uno alla volta man mano che li trova
durante l'analisi per creare un DOM, ma per velocizzare l'operazione, lo "scanner di precaricamento" viene eseguito in modo concorrente.
Se nel documento HTML sono presenti elementi come , lo scanner di precarica sbircia i token
generati dall'interprete HTML e invia richieste al thread di rete nel processo del browser.
JavaScript può bloccare l'analisi
Quando l'analizzatore HTML trova un tag