One of the web's special powers is its composability. Web pages include a variety of different resources, potentially from multiple origins.
A rendering engine is the component of a web browser that transforms HTML, CSS and JavaScript code—along with images and other resources—into web pages you can view and interact with.
Blink was developed as a part of the Chromium projects to serve as the rendering engine for Chromium-based browsers including Chrome, Android WebView, Microsoft Edge, Opera, and Brave.
How does Blink render a web page?
Blink begins the rendering process by gathering all necessary resources such as HTML, CSS, JavaScript, videos, and images. To retrieve these resources, Blink manages interactions with the network stack, in Chromium and the underlying operating system.
As soon as CSS and HTML is loaded, Blink can transform that code, in the form of text, into a representation it can work with—that's called parsing. JavaScript also needs to be parsed and then executed.
Once all that's done, Blink can then begin the work of laying out and displaying web pages that you can view and interact with. This is rendering.
The following diagram shows the stages in the pipeline of rendering tasks, including the components, processes, and resources involved in each. Blink has a lot of work to do!
Render graphics
Blink uses the open-source Skia graphics engine to interact with the underlying graphics hardware of a computer or a mobile device.
Skia provides common APIs that work across a variety of hardware and software platforms. It serves as the graphics engine for Google Chrome and many other products.
Instead of trying to support different operating systems and devices, while keeping up with platform changes, Skia uses graphics libraries including OpenGL, Vulkan, and DirectX. The library Skia uses depends on the platform it's running on, such as Android on mobile or Windows on desktop.
Parse and execute JavaScript
To parse and execute JavaScript and WebAssembly code, Blink uses V8, an open-source engine developed by the Chromium projects.
V8 makes it possible for a developer to use JavaScript or WebAssembly code to access the capabilities of the underlying browser. For example: to manipulate the Document Object Model, which is the internal representation of a document that Blink builds from HTML code.
V8 processes JavaScript in accordance with the JavaScript standard, known as ECMAScript.
Rendering to standards
V8 processes JavaScript in accordance with the JavaScript standard, known as ECMAScript. Rendering engines like Blink are designed to interoperably implement web standards. Web standards allow developers and end-users to be confident that web pages work well, no matter what browser they're using.
Blink follows the specifications for browser and language features defined in web standards including HTML, CSS and DOM.
HTML and the DOM
The HTML Standard defines how browser engineers should implement HTML elements. The specification for each HTML element includes a section that defines the DOM interface for the element. This details how JavaScript should be implemented by the browser, to allow interaction with the element in a way that's standardized across devices and platforms.
The interface specification is written in
WebIDL: Web
Interface Definition Language. The following WebIDL is part of the HTML
standard's definition of the 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 a standardized way of describing functional interfaces, like those that make up most web standards.
To implement a feature, engineers put that WebIDL code in a file, and this automatically gets transformed by Blink to provide an interface to developers for that feature. Once the interface is defined with WebIDL, engineers can build the implementations that respond to interface calls.
Third-party libraries
Blink uses multiple third-party libraries. For example, WebGL is used to render interactive 2D and 3D graphics.
Libraries such as WebGL are highly optimized and carefully tested. They give Blink access to important features and functionality, without needing to reinvent the wheel. The WebGL IDL is defined, and the Blink engineers connect that web interface with code and libraries on the backend that are used to render many different elements .
If you want to see WebGL in action, check out the fractal rendering app Fractious, which uses WebGL.
Chrome versus Chromium
Chrome is built on Chromium. You can actually download and run Chromium as a standalone browser. However, Chrome adds some important features on top of Chromium.
For example:
- Chrome adds proprietary software for decoding audio and video files, known as codecs.
- Chrome can report errors to its engineering team if the user permits.
- Chrome provides a number of user-agent features such as password management, shared history, bookmarks and more, using your Google Account.
- Chrome downloads updates automatically.
- Chrome implements Chrome DevTools for testing, debugging and experimenting right in the browser.
Chrome also goes through rigorous additional testing processes through its release channels—namely Chrome Canary, Chrome Dev, Chrome Beta, and Chrome Stable.
To get an idea of just how much effort goes into building a browser, take a look at the chrome://credits page. It currently lists over 500 technologies and projects used by Chrome.
Cross-platform rendering
You might be wondering, does Chrome use Blink everywhere, on all operating systems and devices?
On iOS and iPadOS, Chrome uses WebKit as its rendering engine. WebKit was actually a fork of another project, KDE, which goes all the way back to 1998. In fact, Safari and Chromium were both based on WebKit initially. Today Safari and all browsers in the Apple ecosystem use WebKit, according to Apple's App Store requirements,
Over time the Chromium projects developed a different multi-process software architecture, as maintaining two separate architectures in one codebase was becoming problematic.
In addition, Chromium wanted to use features that weren't being built into
WebKit. So, starting from version 28, Chromium engineers decided to begin work
on their own rendering engine. They forked their code from WebKit, and they
called it Blink. Rumor has it that Blink was named after the (not so) beloved
<blink> tag that was available in the Netscape Navigator browser to make text
blink on and off.
To sum up: Chrome, Microsoft Edge, Opera, Vivaldi, Brave, and other Chromium-based browsers and frameworks use Blink. Safari and some other browsers use WebKit along with all browsers on iOS and iPadOS including Chrome. Firefox uses a rendering engine called Gecko.
Next steps
Check out What are Blink Intents?