Uno dei poteri speciali del web è la sua componibilità. Le pagine web includono una varietà di risorse diverse, potenzialmente provenienti da più origini.
Blink funge da motore di rendering per i browser basati su Chromium, tra cui Chrome, Android WebView, Microsoft Edge, Opera e Brave.
Un motore di rendering è il componente di un browser web che trasforma il codice HTML, CSS e JavaScript, insieme a immagini e altre risorse, in pagine web che puoi visualizzare e con cui puoi interagire.
Come esegue il rendering di una pagina web Blink?
Blink inizia il processo di rendering raccogliendo tutte le risorse necessarie, come HTML, CSS, JavaScript, video e immagini. Per recuperare queste risorse, Blink gestisce le interazioni con lo stack di rete, in Chromium e nel sistema operativo sottostante.
Una volta caricati CSS e HTML, Blink può trasformare il codice, sotto forma di testo, in una rappresentazione con cui può lavorare. Questa operazione è chiamata analisi. JavaScript deve anche essere analizzato e poi eseguito.
Una volta completate tutte queste operazioni, Blink inizia il rendering. Il rendering è l'attività di disposizione e visualizzazione delle pagine web che visualizzi e con cui interagisci.
Il seguente diagramma mostra le fasi della pipeline delle attività di rendering, inclusi i componenti, i processi e le risorse coinvolti in ciascuna. Blink ha molto lavoro da fare!
Grafica di rendering
Blink utilizza il motore grafico open source Skia per interagire con l'hardware grafico sottostante di un computer o un dispositivo mobile.
Skia fornisce API comuni che funzionano su una vasta gamma di piattaforme hardware e software. Funge da motore grafico per Google Chrome e molti altri prodotti.
Anziché cercare di supportare diversi sistemi operativi e dispositivi, tenendosi al passo con le modifiche della piattaforma, Skia utilizza librerie grafiche tra cui OpenGL, Vulkan e DirectX. La libreria utilizzata da Skia dipende dalla piattaforma su cui viene eseguita, ad esempio Android su dispositivi mobili o Windows su computer.
Analizza ed esegui JavaScript
Per analizzare ed eseguire il codice JavaScript e WebAssembly, Blink utilizza V8, un motore open source sviluppato dai progetti Chromium.
V8 consente a uno sviluppatore di utilizzare codice JavaScript o WebAssembly per accedere alle funzionalità del browser sottostante. Ad esempio, per manipolare il Document Object Model, che è la rappresentazione interna di un documento che Blink crea dal codice HTML.
V8 elabora JavaScript in conformità allo standard JavaScript, noto come ECMAScript.
Rendering in base agli standard
V8 elabora JavaScript in conformità allo standard JavaScript, noto come ECMAScript. I motori di rendering come Blink sono progettati per implementare in modo interoperabile gli standard web. Gli standard web consentono a sviluppatori e utenti finali di avere la certezza che le pagine web funzionino correttamente, indipendentemente dal browser utilizzato.
Blink segue le specifiche per le funzionalità del browser e del linguaggio definite negli standard web, tra cui HTML, CSS e DOM.
HTML e DOM
Lo standard HTML definisce il modo in cui gli ingegneri dei browser devono implementare gli elementi HTML. La specifica per ogni elemento HTML include una sezione che definisce l'interfaccia DOM per l'elemento. Viene descritto in dettaglio come JavaScript deve essere implementato dal browser per consentire l'interazione con l'elemento in modo standardizzato su dispositivi e piattaforme.
La specifica dell'interfaccia è scritta in
WebIDL: Web
Interface Definition Language. Il seguente WebIDL fa parte della definizione di HTMLImageElement dello standard HTML.
[Exposed=Window,
LegacyFactoryFunction=Image(optional unsigned long width, optional unsigned
long height)]
interface HTMLImageElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute DOMString alt;
[CEReactions] attribute USVString src;
[CEReactions] attribute USVString srcset;
[CEReactions] attribute DOMString sizes;
[CEReactions] attribute DOMString? crossOrigin;
[CEReactions] attribute DOMString useMap;
[CEReactions] attribute boolean isMap;
[CEReactions] attribute unsigned long width;
[CEReactions] attribute unsigned long height;
readonly attribute unsigned long naturalWidth;
readonly attribute unsigned long naturalHeight;
readonly attribute boolean complete;
readonly attribute USVString currentSrc;
[CEReactions] attribute DOMString referrerPolicy;
[CEReactions] attribute DOMString decoding;
[CEReactions] attribute DOMString loading;
[CEReactions] attribute DOMString fetchPriority;
Promise<undefined> decode();
// also has obsolete members
};
WebIDL è un modo standardizzato di descrivere le interfacce funzionali, come quelle che costituiscono la maggior parte degli standard web.
Per implementare una funzionalità, gli ingegneri inseriscono il codice WebIDL in un file, che viene automaticamente trasformato da Blink per fornire agli sviluppatori un'interfaccia per quella funzionalità. Una volta definita l'interfaccia con WebIDL, gli ingegneri possono creare le implementazioni che rispondono alle chiamate di interfaccia.
html_image_element.idl nella sorgente di Chromium.Librerie di terze parti
Blink utilizza più librerie di terze parti. Ad esempio, WebGL viene utilizzato per il rendering di grafica 2D e 3D interattiva.
Librerie come WebGL sono altamente ottimizzate e testate con cura. Consentono a Blink di accedere a funzionalità importanti, senza dover reinventare la ruota. L'IDL WebGL è definito e gli ingegneri di Blink collegano l'interfaccia web con il codice e le librerie sul backend utilizzati per il rendering di molti elementi diversi .
Se vuoi vedere WebGL in azione, dai un'occhiata all'app di rendering frattale Fractious, che utilizza WebGL.
Rendering multipiattaforma
Ti starai chiedendo se Chrome utilizza Blink ovunque, su tutti i sistemi operativi e dispositivi.
Su iOS e iPadOS, Chrome utilizza WebKit come motore di rendering. WebKit era in realtà un fork di un altro progetto, KDE, che risale al 1998. Infatti, sia Safari che Chromium si basavano inizialmente su WebKit. Oggi Safari e tutti i browser dell'ecosistema Apple utilizzano WebKit, in conformità con i requisiti dell'App Store di Apple.
Nel corso del tempo, i progetti Chromium hanno sviluppato un'architettura software multiprocesso diversa, poiché il mantenimento di due architetture separate in un unico codebase stava diventando problematico.
Inoltre, Chromium voleva utilizzare funzionalità che non venivano integrate in
WebKit. Pertanto, a partire dalla versione 28, gli ingegneri di Chromium hanno deciso di iniziare a lavorare
sul proprio motore di rendering. Hanno creato una fork del codice di WebKit e l'hanno chiamata Blink. Si dice che Blink abbia preso il nome dal tag <blink> (non molto) amato
disponibile nel browser Netscape Navigator per far lampeggiare il testo.
In sintesi: Chrome, Microsoft Edge, Opera, Vivaldi, Arc, Brave e altri browser e framework basati su Chromium utilizzano Blink. Safari e alcuni altri browser utilizzano WebKit, così come tutti i browser su iOS e iPadOS, incluso Chrome. Firefox utilizza un motore di rendering chiamato Gecko.