Een van de bijzondere krachten van het web is de mogelijkheid tot compositie. Webpagina's bevatten een verscheidenheid aan verschillende bronnen, die potentieel van meerdere oorsprong afkomstig zijn.
Blink fungeert als de rendering-engine voor op Chromium gebaseerde browsers, waaronder Chrome, Android WebView, Microsoft Edge, Opera en Brave.
Een rendering engine is het onderdeel van een webbrowser dat HTML-, CSS- en JavaScript-code – samen met afbeeldingen en andere bronnen – omzet in webpagina's die je kunt bekijken en waarmee je kunt interageren.
Hoe rendert Blink een webpagina?
Blink start het renderingproces door alle benodigde resources te verzamelen, zoals HTML, CSS, JavaScript, video's en afbeeldingen. Om deze resources op te halen, beheert Blink de interacties met de netwerkstack, in Chromium en het onderliggende besturingssysteem.
Zodra CSS en HTML geladen zijn, kan Blink die code, in de vorm van tekst, omzetten naar een bruikbare weergave. Dit proces heet parsen . JavaScript moet ook geparseerd en vervolgens uitgevoerd worden.
Zodra dat allemaal is gedaan, begint Blink met renderen . Renderen is het proces waarbij webpagina's die je bekijkt en waarmee je interactie hebt, worden opgemaakt en weergegeven.
Het volgende diagram toont de fasen in de rendering-pipeline, inclusief de componenten, processen en resources die bij elke fase betrokken zijn. Blink heeft nog veel werk te verzetten!
Grafische weergave
Blink gebruikt de open-source grafische engine Skia om te communiceren met de onderliggende grafische hardware van een computer of mobiel apparaat.
Skia biedt algemene API's die werken op diverse hardware- en softwareplatformen. Het fungeert als grafische engine voor Google Chrome en vele andere producten.
In plaats van te proberen verschillende besturingssystemen en apparaten te ondersteunen en tegelijkertijd platformwijzigingen bij te houden, gebruikt Skia grafische bibliotheken zoals OpenGL , Vulkan en DirectX . Welke bibliotheek Skia gebruikt, hangt af van het platform waarop het draait, zoals Android op mobiele apparaten of Windows op desktops.
JavaScript parseren en uitvoeren
Om JavaScript- en WebAssembly-code te parseren en uit te voeren, gebruikt Blink V8 , een open-source engine ontwikkeld door de Chromium-projecten .
V8 maakt het voor ontwikkelaars mogelijk om JavaScript- of WebAssembly-code te gebruiken om toegang te krijgen tot de mogelijkheden van de onderliggende browser. Bijvoorbeeld om het Document Object Model (DOM) te manipuleren, de interne representatie van een document die Blink opbouwt uit HTML-code.
V8 verwerkt JavaScript volgens de JavaScript-standaard, bekend als ECMAScript .
Renderen volgens de standaarden
V8 verwerkt JavaScript volgens de JavaScript-standaard, bekend als ECMAScript. Rendering-engines zoals Blink zijn ontworpen om webstandaarden interoperabel te implementeren. Webstandaarden zorgen ervoor dat ontwikkelaars en eindgebruikers erop kunnen vertrouwen dat webpagina's goed werken, ongeacht welke browser ze gebruiken.
Blink volgt de specificaties voor browser- en taalfunctionaliteiten die zijn vastgelegd in webstandaarden zoals HTML , CSS en DOM .
HTML en de DOM
De HTML-standaard definieert hoe browserontwikkelaars HTML-elementen moeten implementeren. De specificatie voor elk HTML-element bevat een sectie die de DOM-interface voor het element definieert. Hierin wordt beschreven hoe JavaScript door de browser moet worden geïmplementeerd om interactie met het element mogelijk te maken op een manier die gestandaardiseerd is voor alle apparaten en platforms.
De interfacespecificatie is geschreven in WebIDL : Web Interface Definition Language. De volgende WebIDL maakt deel uit van de definitie van het HTMLImageElement in de HTML-standaard.
[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 is een gestandaardiseerde manier om functionele interfaces te beschrijven, zoals die welke de basis vormen van de meeste webstandaarden.
Om een functionaliteit te implementeren, plaatsen engineers de WebIDL-code in een bestand. Dit bestand wordt vervolgens automatisch door Blink omgezet in een interface voor ontwikkelaars. Zodra de interface met WebIDL is gedefinieerd, kunnen engineers de implementaties bouwen die reageren op interface-aanroepen.
html_image_element.idl in de Chromium-broncode.Bibliotheken van derden
Blink maakt gebruik van meerdere externe bibliotheken. Zo wordt WebGL bijvoorbeeld gebruikt om interactieve 2D- en 3D-afbeeldingen weer te geven.
Bibliotheken zoals WebGL zijn sterk geoptimaliseerd en zorgvuldig getest. Ze geven Blink toegang tot belangrijke functies en functionaliteit, zonder dat het wiel opnieuw hoeft te worden uitgevonden. De WebGL IDL is gedefinieerd en de Blink-engineers verbinden die webinterface met code en bibliotheken aan de backend die worden gebruikt om veel verschillende elementen weer te geven.
Als je WebGL in actie wilt zien, bekijk dan de fractal rendering-app Fractious , die gebruikmaakt van WebGL.
Platformoverschrijdende rendering
Je vraagt je misschien af: gebruikt Chrome Blink overal, op alle besturingssystemen en apparaten?
Op iOS en iPadOS gebruikt Chrome WebKit als rendering-engine. WebKit was oorspronkelijk een afsplitsing van een ander project, KDE , dat al sinds 1998 bestaat. Safari en Chromium waren in eerste instantie beide gebaseerd op WebKit. Tegenwoordig gebruiken Safari en alle browsers in het Apple-ecosysteem WebKit, conform de vereisten van de Apple App Store .
Na verloop van tijd ontwikkelden de Chromium-projecten een andere softwarearchitectuur met meerdere processen, omdat het onderhouden van twee afzonderlijke architecturen in één codebase problematisch werd.
Daarnaast wilde Chromium gebruikmaken van functies die niet in WebKit waren ingebouwd. Daarom besloten de Chromium-ontwikkelaars vanaf versie 28 te beginnen met de ontwikkeling van hun eigen rendering-engine. Ze maakten een fork van de code van WebKit en noemden deze Blink. Het gerucht gaat dat Blink vernoemd is naar de (niet zo) geliefde <blink> -tag die beschikbaar was in de Netscape Navigator-browser om tekst te laten knipperen.
Samenvattend: Chrome, Microsoft Edge, Opera, Vivaldi, Arc, Brave en andere op Chromium gebaseerde browsers en frameworks gebruiken Blink. Safari en sommige andere browsers gebruiken WebKit, net als alle browsers op iOS en iPadOS, waaronder Chrome. Firefox gebruikt een rendering-engine genaamd Gecko .