Nel nostro lavoro è bene comprendere meglio gli strumenti che utilizziamo per utilizzarli al meglio e trarne il massimo. Ecco il primo articolo di una serie a venire, incentrata oggi su uno strumento di base, che utilizziamo quotidianamente senza necessariamente pensarci: il motore di rendering HTML.

"Come sviluppatore web, l'apprendimento del funzionamento interno di un browser ti aiuta a prendere decisioni migliori e a comprendere le ragioni dietro le buone pratiche di sviluppo".
–Paul Irish, Relazioni con gli sviluppatori di Chrome

[tipo separatore=”” size=”” icon=”stella”]

Che cos'è un motore di rendering HTML?

Come probabilmente già saprai, il motore di rendering HTML è una subroutine, un insieme di librerie software che i browser utilizzano per visualizzare le pagine web. È specifico per ogni browser. Vale a dire che dal codice che scrivi, tu sviluppatore, il motore di rendering HTML creerà un visual che l'utente potrà vedere sul suo schermo, e con il quale potrà interagire.
Ce ne sono diversi (Elenco su Wikipedia).

Grazie a questi motori di rendering, ogni browser ha la propria interpretazione di HTML, JavaScript e CSS. Anche questo è qualcosa che ci preoccupa regolarmente durante le fasi di integrazione.
Il motore di rendering è un po' come la chiave di volta del browser, o il suo cuore come preferisci. La sua responsabilità è molto importante. La visualizzazione dei contenuti sullo schermo come desiderato è il nostro obiettivo principale.
[separator type="" size="" icon="star"] Per questo articolo, ho scelto di concentrarmi sui renderer HTML, ma tieni comunque presente che esistono altri tipi di renderer . Non è uno strumento specifico solo per la gestione di documenti HTML.

Un motore di rendering è un software che ricreerà un'immagine da dati digitali. il termine è generico e si applica a diversi tipi di programmi che svolgono compiti o calcoli più o meno semplici.
Un motore di rendering può ad esempio essere responsabile della costruzione di un'immagine 3D a partire dalle informazioni sugli oggetti da disegnare, sulla trama della loro superficie e sulle sorgenti luminose da prendere in considerazione.

A seconda dei casi, ogni motore di rendering HTML è più o meno aggiornato sugli standard W3C…. O più o meno buggato. Ad esempio, il rendering delle animazioni CSS3 non è lo stesso tra Firefox (che gira sotto Gecko) e Chrome (che gira sotto Blink/Webkit): il risultato è molto più fluido su Chrome, mentre otteniamo un rendering piuttosto a scatti su Firefox.

Per impostazione predefinita, il motore di rendering può visualizzare documenti e immagini HTML, XML. Può visualizzare altri tipi con un plug-in (o un'estensione del browser). Ad esempio, un documento PDF viene visualizzato utilizzando un plug-in visualizzatore PDF installato sul browser (come Adobe Reader), gli elementi Flash saranno visibili utilizzando il plug-in Adobe Flash Shockwave Player, ecc.
Ma concentriamoci sull'argomento principale: visualizzare HTML e immagini formattate utilizzando CSS.
[tipo separatore=”” size=”” icon=”stella”]

E come funziona questa bestia?

In primo luogo, il motore di rendering otterrà il contenuto del documento HTML che l'utente desidera visualizzare (ad esempio, ha fatto clic su un collegamento). Verrà caricato in blocchi da 8kb.
Il motore di rendering analizzerà il documento HTML e costruirà l'albero del contenuto dai nodi incontrati nel documento. Ogni nodo corrisponde a ogni elemento.
Analizzerà quindi i dati di stile, contenuti nei file CSS esterni, ma anche quelli inseriti direttamente nel documento HTML, gli elementi di stile. Queste informazioni verranno utilizzate per creare un altro albero.
L'albero di rendering contiene rettangoli con attributi visivi come colori e dimensioni. I rettangoli sono nell'ordine corretto per essere visualizzati sullo schermo.
Dopo la costruzione dell'albero di rendering, il motore otterrà le coordinate esatte dove dovrà far apparire gli elementi sullo schermo. Verrà "letto" e ogni nodo verrà disegnato utilizzando i livelli di sfondo dell'interfaccia utente.

Quello che devi tenere a mente è che è un processo graduale. Il renderer visualizzerà tutto il contenuto che può ottenere sullo schermo il prima possibile. Non aspetterà che tutto il codice HTML venga analizzato prima di iniziare a creare la vista finale.

Sicuramente hai già notato questo fenomeno quando la tua connessione Internet è più lenta del solito e la pagina web sembra "rotta". Infatti, le pagine web non vengono visualizzate riga per riga, partendo dall'alto verso il basso, come le immagini. La parte inferiore della pagina potrebbe essere visualizzata per prima se la parte superiore è più pesante da caricare. Parti del contenuto verranno analizzate e visualizzate, mentre il processo continua con il caricamento del resto della pagina. Gli ultimi elementi da visualizzare sono le immagini più pesanti.
[tipo separatore=”” size=”” icon=”stella”]

I principali motori di rendering HTML

– Gechi

Originariamente “NGLayout”, Gecko è open source e gratuito, è stato lanciato dalla Mozilla Foundation nel 1998, quando Netscape ha pubblicato il codice sorgente del suo browser web Netscape Navigator, rendendolo così open source. Netscape ha quindi creato la Mozilla Foundation, con l'obiettivo di continuare a sviluppare Navigator. Gecko è quindi parte integrante di Netscape Navigator.

È stato progettato per leggere HTML, CSS, XUL e JavaScript e interpretarli. Si trova in varie applicazioni come Firefox, Thunderbird, Netscape Navigator, AOL Explorer o Camino. I prodotti che utilizzano la stessa versione di Gecko hanno il supporto di standard identici.
L'obiettivo di Gecko è un motore portatile che rispetti gli standard web e le raccomandazioni del W3C. Funziona su sistemi operativi Windows, Linux e Mac OS X2. È scritto nel linguaggio di programmazione C++ e distribuito sotto le licenze MPL, GPL e LGPL3. (Fonte: Wikipedia)

– Tridente

Tridente è il nome del motore di visualizzazione delle pagine web utilizzato in Internet Explorer nelle sue versioni Windows e, per estensione, in tutti i browser basati su Internet Explorer. Viene anche spesso chiamato "MSHTML", corrispondente al nome della libreria di collegamento dinamico del motore. È sviluppato da Microsoft in C++

È stato progettato come componente software del livello COM, consentendo agli sviluppatori di aggiungere funzionalità del motore alle loro applicazioni in qualsiasi ambiente di sviluppo che supporta COM, incluso Visual Studio. (Fonte: Wikipedia)

– Kit web

WebKit è una libreria software gratuita che consente agli sviluppatori di integrare facilmente un motore di rendering di pagine Web nel loro software. È disponibile con licenza BSD e GNU LGPL. Originariamente riservato al sistema operativo Mac OS X (dalla versione 10.3 Panther), è stato portato su Linux e Windows. Pertanto i port di WebKit per gli ambienti GTK+ e Qt sono chiamati rispettivamente WebKitGTK+ e QtWebKit.

WebKit è un fork del motore di rendering KHTML del progetto KDE utilizzato in particolare nel browser Konqueror. Integra due sotto-librerie: WebCore e JavaScriptCore corrispondenti rispettivamente a KHTML e KJS.
Supera con successo il test Acid2 e la versione in sviluppo ottiene il 100% nel test Acid3 dal 27 marzo 2008.
Webkit integrava un motore JavaScript che portava lo stesso nome. Da allora è stato riscritto, il nuovo motore ora si chiama SquirrelFish, molto più veloce del precedente.
Nel febbraio 2012, il successo della diffusione di WebKit ha portato "il gruppo OpenWeb, sostenendo la standardizzazione delle tecnologie di sviluppo web, a lanciare un appello agli sviluppatori e a sottolineare le conseguenze del dominio di WebKit sulle pratiche mobili e di sviluppo". A gennaio 2013, la posizione dominante di Webkit pone ancora un problema. (Fonte: Wikipedia)
Google ha recentemente lasciato Webkit a crea il tuo motore di rendering, Lampeggia.
Il resto... Presto 🙂
Emmanuelle Guyot – UX-Scienziata