Deze pagina is vertaald door de Cloud Translation API.

Wat is Blink?

Sam Dutton

Een van de bijzondere krachten van het web is de mogelijkheid om alles samen te stellen. Webpagina's bevatten een verscheidenheid aan bronnen, mogelijk afkomstig van meerdere bronnen.

Blink dient als rendering-engine voor 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 u kunt bekijken en waarmee u kunt interacteren.

Hoe geeft Blink een webpagina weer?

Blink begint het renderingproces door alle benodigde bronnen te verzamelen, zoals HTML, CSS, JavaScript, video's en afbeeldingen. Om deze bronnen 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 representatie waarmee het kan werken – dat heet parsen . JavaScript moet ook geparseerd en vervolgens uitgevoerd worden.

Zodra dat allemaal is gedaan, kan Blink beginnen met het ontwerpen en weergeven van webpagina's die u kunt bekijken en waarmee u kunt interacteren. Dit wordt renderen genoemd .

Het volgende diagram toont de fasen in de pijplijn van renderingtaken, inclusief de componenten, processen en resources die bij elke fase betrokken zijn. Blink heeft nog veel werk te doen!

Blinkrenderingpijplijn, met pijlen die de voortgang door de fasen aangeven. — De Blink-renderingpijplijn beschikt over een resource loader, script-API's en HTML/CSS-parsing. Dit proces verloopt via meerdere fasen om pixels op het scherm te tekenen.

Grafische weergaven

Blink maakt gebruik van de open-source Skia grafische engine om te communiceren met de onderliggende grafische hardware van een computer of mobiel apparaat.

Skia biedt gemeenschappelijke API's die werken op diverse hardware- en softwareplatforms. Het fungeert als de grafische engine voor Google Chrome en vele andere producten.

In plaats van te proberen verschillende besturingssystemen en apparaten te ondersteunen en platformveranderingen bij te houden, maakt Skia gebruik van grafische bibliotheken zoals OpenGL , Vulkan en DirectX . De bibliotheek die Skia gebruikt, is afhankelijk van het platform waarop het draait, zoals Android op mobiel of Windows op desktop.

JavaScript parseren en uitvoeren

Om JavaScript- en WebAssembly-code te parseren en uit te voeren, maakt Blink gebruik van V8 , een open-source engine ontwikkeld door de Chromium-projecten .

V8 maakt het voor een ontwikkelaar 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 te manipuleren, de interne representatie van een document die Blink opbouwt op basis van HTML-code.

V8 verwerkt JavaScript volgens de JavaScript-standaard, ook wel ECMAScript genoemd.

Renderen volgens normen

V8 verwerkt JavaScript volgens de JavaScript-standaard, 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 taalfuncties die zijn gedefinieerd in webstandaarden, waaronder 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. Deze beschrijft hoe JavaScript door de browser moet worden geïmplementeerd, zodat interactie met het element op een gestandaardiseerde manier op alle apparaten en platforms mogelijk is.

De interfacespecificatie is geschreven in WebIDL : Web Interface Definition Language. De volgende WebIDL maakt deel uit van de HTML-standaarddefinitie van het HTMLImageElement .

[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 in de meeste webstandaarden voorkomen.

Om een functie te implementeren, plaatsen engineers die WebIDL-code in een bestand. Deze wordt automatisch door Blink omgezet om ontwikkelaars een interface voor die functie te bieden. Zodra de interface met WebIDL is gedefinieerd, kunnen engineers de implementaties bouwen die reageren op interface-aanroepen.

`html_image_element.idl` in Chromium-bron.

Bibliotheken van derden

Blink maakt gebruik van meerdere bibliotheken van derden. WebGL wordt bijvoorbeeld gebruikt om interactieve 2D- en 3D-graphics te renderen.

Bibliotheken zoals WebGL zijn zeer geoptimaliseerd en zorgvuldig getest. Ze geven Blink toegang tot belangrijke functies en functionaliteit, zonder dat het wiel opnieuw uitgevonden hoeft te worden. De WebGL IDL is gedefinieerd en de Blink-engineers verbinden die webinterface met code en bibliotheken aan de backend die worden gebruikt om diverse elementen te renderen.

Als je WebGL in actie wilt zien, bekijk dan de fractal-rendering-app Fractious , die WebGL gebruikt.

Fractious : een WebGL-gebaseerde viewer voor de Mandelbrotset.

Cross-platform rendering

U vraagt zich misschien af of Chrome overal, op alle besturingssystemen en apparaten, Blink gebruikt?

Op iOS en iPadOS gebruikt Chrome WebKit als rendering-engine. WebKit was eigenlijk een fork van een ander project, KDE , dat al sinds 1998 bestaat. Safari en Chromium waren beide oorspronkelijk gebaseerd op WebKit. Tegenwoordig gebruiken Safari en alle browsers in het Apple-ecosysteem WebKit, volgens de vereisten van Apple's App Store .

In de loop der tijd ontwikkelden de Chromium-projecten een andere multi-proces softwarearchitectuur, omdat het onderhouden van twee afzonderlijke architecturen in één codebase problematisch werd.

Bovendien wilde Chromium functies gebruiken die niet in WebKit waren ingebouwd. Daarom besloten Chromium-technici vanaf versie 28 te beginnen met het ontwikkelen van hun eigen rendering engine. Ze splitsten hun 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 Chromium-gebaseerde browsers en frameworks gebruiken Blink. Safari en sommige andere browsers gebruiken WebKit, net als alle browsers op iOS en iPadOS, inclusief Chrome. Firefox gebruikt een rendering engine genaamd Gecko .

Volgende stappen

Bekijk Wat zijn Blink Intents?