CPU, GPU, memoria e architettura multi-processo
In questa serie di blog in quattro parti, esamineremo all'interno del browser Chrome, dall'architettura di alto livello alle specifiche della pipeline di rendering. Se hai mai pensato a come il browser trasforma il tuo codice in un sito web funzionale o non sai perché è consigliata una tecnica specifica per migliorare le prestazioni, questa serie fa al caso tuo.
Nella prima parte di questa serie, esamineremo la terminologia di base del computing e l'architettura multi-processo di Chrome.
Al centro del computer ci sono la CPU e la GPU
Per comprendere l'ambiente su cui è in esecuzione il browser, dobbiamo conoscere alcune parti del computer e il loro funzionamento.
CPU
La prima è l'C Centrale C- o C. La CPU è considerata il cervello del tuo computer. Un core CPU, mostrato qui come un impiegato, può gestire molte attività diverse una per una man mano che arrivano. Può gestire qualsiasi cosa, dalla matematica all'arte, pur sapendo come rispondere alle chiamate dei clienti. In passato, la maggior parte delle CPU era un singolo chip. Un core è come un'altra CPU che risiede nello stesso chip. Nell'hardware moderno, spesso sono presenti più core, che aumentano la potenza di calcolo di telefoni e laptop.
GPU
L'interfaccia Grafica di elaborazione è un'altra parte del computer. A differenza della CPU, la GPU è in grado di gestire attività semplici ma su più core contemporaneamente. Come suggerisce il nome, è stato sviluppato inizialmente per gestire gli elementi grafici. Questo è il motivo per cui nel contesto delle immagini "con GPU" o "basata su GPU" si associa a un rendering veloce e a un'interazione fluida. Negli ultimi anni, grazie al computing con accelerazione GPU, sempre più operazioni di calcolo sono diventate possibili solo su GPU.
Quando avvii un'applicazione sul computer o sul telefono, la CPU e la GPU sono quelle alla base dell'applicazione. In genere, le applicazioni vengono eseguite su CPU e GPU utilizzando meccanismi forniti dal sistema operativo.
Esegui programma su Process e Thread
Un altro concetto da comprendere prima di addentrarci nell'architettura dei browser sono i processi e i thread. Un processo può essere descritto come il programma in esecuzione di un'applicazione. Un thread è quello che si trova all'interno del processo ed esegue qualsiasi parte del programma.
Quando avvii un'applicazione, viene creato un processo. Il programma potrebbe creare thread per aiutarlo a funzionare, ma questo è facoltativo. Il sistema operativo fornisce al processo uno "slab" di memoria con cui lavorare e tutto lo stato dell'applicazione viene mantenuto in quello spazio di memoria privato. Quando chiudi l'applicazione, anche il processo scompare e il sistema operativo libera la memoria.
Un processo può chiedere al sistema operativo di avviare un altro processo per eseguire attività diverse. In questo caso, per il nuovo processo vengono allocate diverse parti della memoria. Se due processi hanno bisogno di parlare, possono farlo utilizzando la comunicazione Inter Process Communication (IPC). Molte applicazioni sono progettate per funzionare in questo modo, in modo che, se un processo worker non risponde, può essere riavviato senza arrestare altri processi che eseguono diverse parti dell'applicazione.
Architettura del browser
Come si crea un browser web utilizzando processi e thread? Potrebbe trattarsi di un processo con molti thread diversi o di molti processi diversi con alcuni thread che comunicano tramite IPC.
La cosa importante da notare qui è che queste diverse architetture sono dettagli di implementazione. Non esiste una specifica standard su come si potrebbe creare un browser web. L'approccio di un browser può essere completamente diverso da un altro.
Per questa serie di blog, stiamo usando la recente architettura di Chrome, descritta nella Figura 8.
Nella parte superiore si trova il processo del browser che si coordina con altri processi che si occupano delle diverse parti dell'applicazione. Per il processo del renderer, vengono creati e assegnati più processi a ogni scheda. Fino a poco tempo fa, Chrome assegnava a ogni scheda il processo quando poteva; ora prova a fornire a ogni sito il proprio processo, inclusi gli iframe (vedi Isolamento dei siti).
Quale processo controlla cosa?
Nella tabella che segue vengono descritti tutti i processi di Chrome e i controlli che vengono eseguiti:
| Processo e cosa controlla | |
|---|---|
| Browser |
Consente di controllare la parte "Chrome" dell'applicazione, tra cui barra degli indirizzi, preferiti e pulsanti Indietro e Avanti. Gestisce anche le parti invisibili e privilegiate di un browser web, come le richieste di rete e l'accesso ai file. |
| Renderer | Controlla qualsiasi elemento all'interno della scheda in cui viene visualizzato un sito web. |
| Plug-in | Consente di controllare tutti i plug-in utilizzati dal sito web, ad esempio Flash. |
| GPU | Gestisce le attività della GPU separatamente dagli altri processi. È suddiviso in diversi processi perché le GPU gestiscono le richieste da più app e le disegnano sulla stessa superficie. |
Esistono anche altri processi, come il processo di estensione e i processi dell'utilità. Se vuoi vedere quanti processi sono in esecuzione in Chrome, fai clic sull'icona del menu opzioni nell'angolo in alto a destra, seleziona Altri strumenti e poi Task Manager. Viene visualizzata una finestra con un elenco dei processi attualmente in esecuzione e la quantità di CPU/memoria in uso.
Il vantaggio dell'architettura multi-processo in Chrome
Prima ho detto che Chrome utilizza un processo di rendering multiplo. Nel caso più semplice, puoi immaginare che ogni scheda abbia il proprio processo di rendering. Supponiamo che tu abbia tre schede aperte e che ogni scheda venga eseguita da un processo di rendering indipendente.
Se una scheda non risponde, puoi chiudere quella che non risponde e andare avanti mantenendo attive le altre. Se tutte le schede sono in esecuzione in un solo processo, quando una di queste non risponde, tutte le schede non rispondono. È triste.
Un altro vantaggio derivante dalla separazione del lavoro del browser in più processi è la sicurezza e il sandboxing. Poiché i sistemi operativi consentono di limitare i privilegi dei processi, il browser può limitare la limitazione tramite sandbox di determinati processi di determinate funzionalità. Ad esempio, il browser Chrome limita l'accesso arbitrario ai file per i processi che gestiscono l'input arbitrario dell'utente come il processo del renderer.
Poiché i processi hanno uno spazio di memoria privato dedicato, spesso contengono copie dell'infrastruttura comune (come V8, il motore JavaScript di Chrome). Ciò significa un maggiore utilizzo della memoria, perché non possono essere condivisi come lo sarebbero se fossero thread all'interno dello stesso processo. Per risparmiare memoria, Chrome impone un limite al numero di processi che può avviare. Il limite varia a seconda della quantità di memoria e della CPU del dispositivo, ma quando Chrome raggiunge il limite, inizia a eseguire più schede dello stesso sito in un unico processo.
Risparmio di più memoria - Manutenzione in Chrome
Lo stesso approccio viene applicato al processo del browser. Chrome sta subendo delle modifiche all'architettura per eseguire ogni parte del browser come servizio e consentire la suddivisione in diversi processi o l'aggregazione in un unico processo.
L'idea generale è che, quando Chrome è in esecuzione su un hardware potente, potrebbe suddividere ciascun servizio in diversi processi conferendo maggiore stabilità, ma se si trova su un dispositivo con vincoli di risorse, Chrome consolida i servizi in un unico processo risparmiando spazio di memoria. Prima di questo cambiamento, su piattaforme come Android abbiamo utilizzato un approccio simile per consolidare i processi per ridurre l'utilizzo della memoria.
Processi del renderer per frame - Isolamento dei siti
L'isolamento dei siti è una funzionalità introdotta di recente in Chrome che esegue un processo di rendering separato per ogni iframe tra siti. Abbiamo parlato di un processo di rendering per modello di scheda che consentiva l'esecuzione di iframe tra siti in un unico processo di rendering con condivisione dello spazio di memoria tra siti diversi. Eseguire a.com e b.com nello stesso processo di rendering potrebbe non essere un problema. La stessa norma di origine è il modello di sicurezza di base del web e garantisce che un sito non possa accedere ai dati di altri siti senza il consenso. L'esclusione di questo criterio è uno degli obiettivi principali degli attacchi alla sicurezza. L'isolamento dei processi è il modo più efficace per separare i siti. Con Meltdown e Spectre, è diventato ancora più evidente che dobbiamo separare i siti utilizzando i processi. Se l'isolamento dei siti è attivato sul desktop per impostazione predefinita a partire da Chrome 67, a ogni iframe tra siti in una scheda viene eseguito un processo di rendering separato.
Consentire l'isolamento dei siti è stato un impegno ingegneristico pluriennale. L'isolamento dei siti non è semplice quanto assegnare processi del renderer diversi; cambia sostanzialmente il modo in cui gli iframe comunicano tra loro. L'apertura di devtools su una pagina con iframe in esecuzione su processi diversi significa che devtools ha dovuto implementare il lavoro dietro le quinte affinché apparisse senza interruzioni. È anche possibile eseguire una semplice combinazione di Ctrl+F per trovare una parola in una pagina. Puoi capire perché i tecnici dei browser considerano il rilascio dell'isolamento dei siti come un traguardo importante.
Conclusione
In questo post abbiamo visto una panoramica generale dell'architettura del browser e abbiamo parlato dei vantaggi di un'architettura multi-processo. Abbiamo anche parlato della manutenzione e dell'isolamento dei siti in Chrome, profondamente correlato all'architettura multi-processo. Nel prossimo post, inizieremo ad analizzare ciò che accade tra questi processi e i thread per visualizzare un sito web.
Ti è piaciuto il post? In caso di domande o suggerimenti per il prossimo post, mi piacerebbe ricevere la tua opinione all'indirizzo @kosamari su Twitter.