Leer uw tools beter kennen (N°1) – De HTML-renderingengine

In ons werk is het goed om de tools die we gebruiken beter te begrijpen om ze beter te kunnen gebruiken en er het maximale uit te halen. Hier is het eerste artikel van een reeks die vandaag gaat komen, gericht op een basistool, die we dagelijks gebruiken zonder er per se bij na te denken: de HTML-renderingengine.

"Als webontwikkelaar helpt het leren van de innerlijke werking van een browser om betere beslissingen te nemen en de grondgedachten achter goede ontwikkelingspraktijken te begrijpen."
–Paul Irish, Chrome Developer Relations

[type scheidingsteken=”” size=”” icon=”ster”]

Wat is een HTML-renderingengine?

Zoals u waarschijnlijk al weet, is de HTML-weergave-engine een subroutine, een set softwarebibliotheken die browsers gebruiken om webpagina's weer te geven. Het is specifiek voor elke browser. Dat wil zeggen dat uit de code die je schrijft, jij ontwikkelaar, de HTML-renderingengine een beeld zal creëren dat de gebruiker op zijn scherm kan zien en waarmee hij kan communiceren.
Er zijn meerdere (Lijst op Wikipedia).
Engine_vaz
Door deze rendering engines heeft elke browser zijn eigen interpretatie van HTML, JavaScript en CSS. Dit is ook iets dat ons regelmatig zorgen baart tijdens de integratiefasen.
De rendering-engine lijkt een beetje op de hoeksteen van de browser, of het hart zoals u dat wilt. Zijn verantwoordelijkheid is erg belangrijk. Het naar wens weergeven van content op het scherm is ons belangrijkste doel.
[separator type=”” size=”” icon=”star”] Voor dit artikel heb ik ervoor gekozen om me te concentreren op HTML-renderers, maar houd er rekening mee dat er andere soorten renderers zijn. Het is geen tool die alleen specifiek is voor het beheer van HTML-documenten.

Een rendering-engine is software die een afbeelding van digitale gegevens recreëert. de term is generiek en heeft betrekking op verschillende soorten programma's die min of meer eenvoudige taken of berekeningen uitvoeren.
Een rendering-engine kan bijvoorbeeld verantwoordelijk zijn voor het construeren van een 3D-beeld uit informatie over de te tekenen objecten, de textuur van hun oppervlak en de in aanmerking te nemen lichtbronnen.

Afhankelijk van het geval is elke HTML-renderingengine min of meer up-to-date op de W3C-standaarden…. Of min of meer buggy. De weergave van CSS3-animaties is bijvoorbeeld niet hetzelfde tussen Firefox (die draait onder Gecko) en Chrome (die draait onder Blink/Webkit): het resultaat is veel vloeiender in Chrome, terwijl we een nogal schokkerige weergave krijgen op Firefox.
moderne tijd-5
Standaard kan de rendering-engine HTML, XML-documenten en afbeeldingen weergeven. Het kan andere typen weergeven met een plug-in (of browserextensie). Een PDF-document wordt bijvoorbeeld weergegeven met behulp van een plug-in voor PDF-viewer die u in uw browser installeert (zoals Adobe Reader), Flash-elementen worden zichtbaar met behulp van de plug-in Adobe Flash Shockwave Player, enz.
Maar laten we ons concentreren op het hoofdonderwerp: HTML en afbeeldingen weergeven die zijn opgemaakt met CSS.
[type scheidingsteken=”” size=”” icon=”ster”]

En hoe werkt dit beest?

Eerst verkrijgt de rendering-engine de inhoud van het HTML-document dat de gebruiker wil weergeven (hij heeft bijvoorbeeld op een link geklikt). Het laadt in blokken van 8 kb.
De rendering-engine analyseert het HTML-document en bouwt de inhoudsboom op van de knooppunten die in het document worden aangetroffen. Elk knooppunt komt overeen met elk element.
Vervolgens analyseert het de stijlgegevens, die in de externe CSS-bestanden zitten, maar ook die welke direct in het HTML-document zijn ingevoegd, de stijlelementen. Deze informatie wordt gebruikt om een ​​andere boom te maken.
De renderboom bevat rechthoeken met visuele attributen zoals kleuren en afmetingen. De rechthoeken staan ​​in de juiste volgorde om op het scherm te worden weergegeven.
Na de constructie van de weergavestructuur zal de engine de exacte coördinaten verkrijgen waar hij de elementen op het scherm moet laten verschijnen. Het wordt 'gelezen' en elk knooppunt wordt getekend met behulp van de UI-achtergrondlagen.

Waar je wel rekening mee moet houden is dat het een geleidelijk proces is. De renderer zal zo snel mogelijk alle inhoud op het scherm weergeven. Het zal niet wachten tot alle HTML-code is geparseerd voordat het begint met het bouwen van de uiteindelijke weergave.

Je hebt dit fenomeen vast al opgemerkt wanneer je internetverbinding trager is dan normaal en de webpagina 'kapot' lijkt te zijn. Webpagina's worden inderdaad niet regel voor regel weergegeven, van boven naar beneden, zoals afbeeldingen. Het onderste deel van de pagina kan heel goed als eerste worden weergegeven als het bovenste deel zwaarder is om te laden. Delen van de inhoud worden geparseerd en weergegeven, terwijl het proces doorgaat met het laden van de rest van de pagina. De laatste elementen die worden weergegeven, zijn de zwaarste afbeeldingen.
[type scheidingsteken=”” size=”” icon=”ster”]

De belangrijkste HTML-renderingengines

– gekko’s

Oorspronkelijk "NGLayout", is Gecko open source en gratis. Het werd gelanceerd door de Mozilla Foundation in 1998, toen Netscape de broncode van zijn webbrowser Netscape Navigator publiceerde, waardoor het open source werd. Netscape richtte vervolgens de Mozilla Foundation op, met als doel Navigator door te ontwikkelen. Gecko is dan een integraal onderdeel van Netscape Navigator.

Het is ontworpen om HTML, CSS, XUL en JavaScript te lezen en te interpreteren. Het is te vinden in verschillende toepassingen zoals Firefox, Thunderbird, Netscape Navigator, AOL Explorer of Camino. Producten die dezelfde versie van Gecko gebruiken, hebben dezelfde standaardondersteuning.
Het doel van Gecko is een draagbare engine die webstandaarden en W3C-aanbevelingen respecteert. Het werkt op Windows, Linux en Mac OS X2 besturingssystemen. Het is geschreven in de programmeertaal C++ en wordt gedistribueerd onder de licenties MPL, GPL en LGPL3. (Bron: Wikipedia)

– Drietand

Trident is de naam van de webpaginaweergave-engine die wordt gebruikt in Internet Explorer in zijn Windows-versies, en bij uitbreiding alle browsers die zijn gebaseerd op Internet Explorer. Het wordt ook vaak "MSHTML" genoemd, wat overeenkomt met de naam van de dynamische linkbibliotheek van de engine. Het is ontwikkeld door Microsoft in C++

Het is ontworpen als een softwarecomponent van de COM-laag, waardoor ontwikkelaars engine-functionaliteit kunnen toevoegen aan hun applicaties in elke ontwikkelomgeving die COM ondersteunt, inclusief Visual Studio. (Bron: Wikipedia)

–Webkit

WebKit is een gratis softwarebibliotheek waarmee ontwikkelaars eenvoudig een webpaginaweergave-engine in hun software kunnen integreren. Het is beschikbaar onder de BSD- en GNU LGPL-licentie. Oorspronkelijk gereserveerd voor het Mac OS X-besturingssysteem (vanaf versie 10.3 Panther), is het geport naar Linux en Windows. Zo heten de poorten van WebKit voor de GTK+- en Qt-omgevingen respectievelijk WebKitGTK+ en QtWebKit.

WebKit is een afsplitsing van de KHTML-renderingengine van het KDE-project dat met name in de Konqueror-browser wordt gebruikt. Het integreert twee subbibliotheken: WebCore en JavaScriptCore die respectievelijk overeenkomen met KHTML en KJS.
Het doorstaat met succes de Acid2-test en de versie in ontwikkeling behaalt sinds 100 maart 3 27% in de Acid2008-test.
Webkit integreerde een JavaScript-engine met dezelfde naam. Het is sindsdien herschreven, de nieuwe engine heet nu SquirrelFish, veel sneller dan de vorige.
In februari 2012 leidde het succes van de verspreiding van WebKit ertoe dat "de OpenWeb-groep, die pleitte voor de standaardisatie van webontwikkelingstechnologieën, een beroep deed op ontwikkelaars en op de gevolgen wees van de dominantie van WebKit op mobiel en ontwikkelaarspraktijken". Anno 2013 vormt de dominante positie van Webkit nog een probleem. (Bron: Wikipedia)
Google heeft Webkit onlangs verlaten om maak je eigen rendering-engine, Knipperen.
De rest... Binnenkort 🙂
Emmanuelle Guyot – UX-wetenschapper