Uno dei poteri speciali del web è la sua componibilità. Le pagine web includono una serie 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 interagire.
In che modo Blink esegue il rendering di una pagina web?
Blink avvia 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 di base.
Non appena CSS e HTML vengono caricati, Blink può trasformare il codice, sotto forma di testo, in una rappresentazione con cui può lavorare. Questa operazione è chiamata analisi sintattica. Inoltre, JavaScript deve essere analizzato ed eseguito.
Al termine di questa procedura, Blink può iniziare a occuparsi della disposizione e della visualizzazione delle pagine web che puoi visualizzare e con cui puoi interagire. Questo è il rendering.
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 di un dispositivo mobile.
Skia fornisce API comuni che funzionano su una serie di piattaforme hardware e software. Funge da motore grafico per Google Chrome e molti altri prodotti.
Invece di provare a supportare diversi sistemi operativi e dispositivi, rimanendo al passo con le modifiche della piattaforma, Skia utilizza librerie grafiche tra cui OpenGL, Vulkan e DirectX. La biblioteca utilizzata da Skia dipende dalla piattaforma su cui è in esecuzione, 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 il codice JavaScript o WebAssembly per accedere alle funzionalità del browser sottostante. Ad esempio, per manipolare il Document Object Model, ovvero la rappresentazione interna di un documento creato da Blink a partire dal codice HTML.
V8 elabora JavaScript in conformità con lo standard JavaScript, noto come ECMAScript.
Rendering secondo gli standard
V8 elabora JavaScript in conformità con lo 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 in che modo gli sviluppatori di browser devono implementare gli elementi HTML. La specifica per ogni elemento HTML include una sezione che definisce l'interfaccia DOM per l'elemento. Vengono descritti 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 per 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 trasformato automaticamente da Blink per fornire agli sviluppatori un'interfaccia per la funzionalità. Una volta definita l'interfaccia con WebIDL, gli ingegneri possono creare le implementazioni che rispondono alle chiamate dell'interfaccia.
html_image_element.idl nel codice sorgente di Chromium.Librerie di terze parti
Blink utilizza più librerie di terze parti. Ad esempio, WebGL viene utilizzato per eseguire il rendering di grafica 2D e 3D interattiva.
Librerie come WebGL sono altamente ottimizzate e testate con attenzione. Offrono a Blink accesso a funzionalità e caratteristiche importanti, senza dover reinventare la ruota. L'IDL WebGL è definito e gli ingegneri di Blink collegano questa interfaccia web al codice e alle librerie sul back-end che vengono utilizzate per eseguire 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 i 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, Safari e Chromium erano entrambi inizialmente basati su WebKit. Attualmente, Safari e tutti i browser dell'ecosistema Apple utilizzano WebKit, in base ai requisiti dell'App Store di Apple.
Nel 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à non 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 un fork del codice di WebKit e lo hanno chiamato Blink. Si dice che Blink sia stato chiamato così in onore del (non tanto) amato tag<blink> disponibile nel browser Netscape Navigator per attivare e disattivare il lampeggio del 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, insieme a tutti i browser su iOS e iPadOS, incluso Chrome. Firefox utilizza un motore di rendering chiamato Gecko.
Passaggi successivi
Consulta l'articolo Che cosa sono gli intent di Blink?.