Eine der besonderen Stärken des Webs ist seine Zusammensetzbarkeit. Webseiten enthalten eine Vielzahl verschiedener Ressourcen, die möglicherweise aus mehreren Quellen stammen.
Blink dient als Rendering-Engine für Chromium-basierte Browser wie Chrome, Android WebView, Microsoft Edge, Opera und Brave.
Eine Rendering-Engine ist die Komponente eines Webbrowsers, die HTML-, CSS- und JavaScript-Code sowie Bilder und andere Ressourcen in Webseiten umwandelt, die Sie aufrufen und mit denen Sie interagieren können.
Wie rendert Blink eine Webseite?
Blink beginnt den Rendering-Prozess, indem alle erforderlichen Ressourcen wie HTML, CSS, JavaScript, Videos und Bilder abgerufen werden. Um diese Ressourcen abzurufen, verwaltet Blink die Interaktionen mit dem Netzwerk-Stack in Chromium und dem zugrunde liegenden Betriebssystem.
Sobald CSS und HTML geladen sind, kann Blink diesen Code in Form von Text in eine Darstellung umwandeln, mit der es arbeiten kann. Das wird als Parsing bezeichnet. JavaScript muss auch geparst und dann ausgeführt werden.
Sobald das alles erledigt ist, kann Blink mit dem Layout und der Darstellung von Webseiten beginnen, die Sie sich ansehen und mit denen Sie interagieren können. Das ist Rendering.
Das folgende Diagramm zeigt die Phasen in der Pipeline von Rendering-Aufgaben, einschließlich der Komponenten, Prozesse und Ressourcen, die in jeder Phase beteiligt sind. Blink hat viel zu tun!
Grafiken rendern
Blink verwendet die Open-Source-Grafik-Engine Skia, um mit der zugrunde liegenden Grafikhardware eines Computers oder Mobilgeräts zu interagieren.
Skia bietet gemeinsame APIs, die auf einer Vielzahl von Hardware- und Softwareplattformen funktionieren. Sie dient als Grafik-Engine für Google Chrome und viele andere Produkte.
Anstatt verschiedene Betriebssysteme und Geräte zu unterstützen und gleichzeitig mit Plattformänderungen Schritt zu halten, verwendet Skia Grafikenbibliotheken wie OpenGL, Vulkan und DirectX. Die von Skia verwendete Bibliothek hängt von der Plattform ab, auf der sie ausgeführt wird, z. B. Android auf Mobilgeräten oder Windows auf Computern.
JavaScript parsen und ausführen
Zum Parsen und Ausführen von JavaScript- und WebAssembly-Code verwendet Blink V8, eine Open-Source-Engine, die von den Chromium-Projekten entwickelt wurde.
V8 ermöglicht es Entwicklern, mit JavaScript- oder WebAssembly-Code auf die Funktionen des zugrunde liegenden Browsers zuzugreifen. Beispiel: Das Document Object Model (DOM) bearbeiten. Das DOM ist die interne Darstellung eines Dokuments, die Blink aus HTML-Code erstellt.
V8 verarbeitet JavaScript gemäß dem JavaScript-Standard, der als ECMAScript bezeichnet wird.
Rendering nach Standards
V8 verarbeitet JavaScript gemäß dem JavaScript-Standard, der als ECMAScript bezeichnet wird. Rendering-Engines wie Blink sind so konzipiert, dass sie Webstandards interoperabel implementieren. Webstandards geben Entwicklern und Endnutzern die Gewissheit, dass Webseiten unabhängig vom verwendeten Browser gut funktionieren.
Blink folgt den Spezifikationen für Browser- und Sprachfunktionen, die in Webstandards wie HTML, CSS und DOM definiert sind.
HTML und das DOM
Der HTML-Standard definiert, wie Browserentwickler HTML-Elemente implementieren sollten. Die Spezifikation für jedes HTML-Element enthält einen Abschnitt, in dem die DOM-Schnittstelle für das Element definiert wird. Hier wird beschrieben, wie JavaScript vom Browser implementiert werden sollte, um die Interaktion mit dem Element auf eine Weise zu ermöglichen, die geräte- und plattformübergreifend standardisiert ist.
Die Schnittstellenspezifikation ist in WebIDL geschrieben, der Web Interface Definition Language. Das folgende WebIDL ist Teil der HTML-Standarddefinition von 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 ist eine standardisierte Methode zur Beschreibung funktionaler Schnittstellen, wie sie in den meisten Webstandards verwendet werden.
Um ein Feature zu implementieren, fügen Entwickler diesen WebIDL-Code in eine Datei ein. Diese wird dann automatisch von Blink transformiert, um Entwicklern eine Schnittstelle für dieses Feature bereitzustellen. Sobald die Schnittstelle mit WebIDL definiert ist, können Entwickler die Implementierungen erstellen, die auf Schnittstellenaufrufe reagieren.
html_image_element.idl in Chromium-Quellcode.Bibliotheken von Drittanbietern
Blink verwendet mehrere Drittanbieterbibliotheken. WebGL wird beispielsweise zum Rendern interaktiver 2D- und 3D-Grafiken verwendet.
Bibliotheken wie WebGL sind hochgradig optimiert und sorgfältig getestet. Sie ermöglichen Blink den Zugriff auf wichtige Funktionen, ohne dass das Rad neu erfunden werden muss. Die WebGL-IDL ist definiert und die Blink-Entwickler verbinden diese Weboberfläche mit Code und Bibliotheken im Backend, die zum Rendern vieler verschiedener Elemente verwendet werden .
Wenn Sie WebGL in Aktion sehen möchten, können Sie sich die App Fractious ansehen, die WebGL für das Rendern von Fraktalen verwendet.
Plattformübergreifendes Rendering
Sie fragen sich vielleicht, ob Chrome Blink überall, auf allen Betriebssystemen und Geräten verwendet.
Unter iOS und iPadOS verwendet Chrome WebKit als Rendering-Engine. WebKit war eigentlich ein Fork eines anderen Projekts, KDE, das bis ins Jahr 1998 zurückreicht. Tatsächlich basierten sowohl Safari als auch Chromium ursprünglich auf WebKit. Gemäß den App Store-Anforderungen von Apple verwenden Safari und alle Browser im Apple-Ökosystem WebKit.
Im Laufe der Zeit entwickelten die Chromium-Projekte eine andere Softwarearchitektur mit mehreren Prozessen, da die Wartung von zwei separaten Architekturen in einer Codebasis problematisch wurde.
Außerdem wollte Chromium Funktionen verwenden, die nicht in WebKit integriert wurden. Ab Version 28 beschlossen die Chromium-Entwickler, mit der Entwicklung einer eigenen Rendering-Engine zu beginnen. Sie haben ihren Code von WebKit abgezweigt und ihn Blink genannt. Gerüchten zufolge wurde Blink nach dem (nicht so) beliebten <blink>-Tag benannt, das im Netscape Navigator-Browser verfügbar war, um Text blinken zu lassen.
Zusammenfassend lässt sich sagen, dass Chrome, Microsoft Edge, Opera, Vivaldi, Arc, Brave und andere Chromium-basierte Browser und Frameworks Blink verwenden. Safari und einige andere Browser verwenden WebKit. Das gilt auch für alle Browser unter iOS und iPadOS, einschließlich Chrome. Firefox verwendet eine Rendering-Engine namens Gecko.
Nächste Schritte
Weitere Informationen finden Sie unter Was sind Blink-Intents?.