Get to know your tools better (N°1) – The HTML rendering engine

In our jobs, it is good to better understand the tools we use in order to better use them and get the most out of them. Here is the first article of a series to come, centered today on a basic tool, which we use daily without necessarily thinking about it: the HTML rendering engine.

“As a web developer, learning the inner workings of a browser helps you make better decisions and understand the rationales behind good development practices.”
–Paul Irish, Chrome Developer Relations

[separator type=”” size=”” icon=”star”]

What is an HTML rendering engine?

As you probably already know, the HTML rendering engine is a subroutine, a set of software libraries that browsers use to display web pages. It is specific to each browser. That is to say that from the code that you write, you developer, the HTML rendering engine will create a visual that the user will be able to see on his screen, and with which he will be able to interact.
There are several (List on Wikipedia).
Engine_vaz
Because of these rendering engines, each browser has its own interpretation of HTML, JavaScript and CSS. This is also something that regularly causes us concern during the integration phases.
The rendering engine is a bit like the keystone of the browser, or its heart as you prefer. His responsibility is very important. The display of content on the screen as desired is our major objective.
[separator type=”” size=”” icon=”star”] For this article, I chose to focus on HTML renderers, but still be aware that there are other types of renderers . It is not a tool specific only to the management of HTML documents.

A rendering engine is software that will recreate an image from digital data. the term is generic and applies to several types of programs performing more or less simple tasks or calculations.
A rendering engine can for example be responsible for constructing a 3D image from information on the objects to be drawn, the texture of their surface and the light sources to be taken into account.

Depending on the case, each HTML rendering engine is more or less up to date on W3C standards…. Or more or less buggy. For example, the rendering of CSS3 animations is not the same between Firefox (which runs under Gecko) and Chrome (which runs under Blink/Webkit): The result is much more fluid on Chrome, whereas we obtain a rendering rather jerky on firefox.
modern-times-5
By default, the rendering engine can display HTML, XML documents and images. It can display other types with a plug-in (or browser extension). For example, a PDF document is displayed using a PDF viewer plug-in that you install on your browser (such as Adobe Reader), Flash elements will be visible using the Adobe Flash Shockwave Player plug-in, etc.
But let's focus on the main topic: displaying HTML and images that are formatted using CSS.
[separator type=”” size=”” icon=”star”]

And how does this beast work?

First, the rendering engine will obtain the content of the HTML document that the user wishes to display (he clicked on a link for example). It will load in 8kb chunks.
The rendering engine will analyze the HTML document and it will build the content tree from the nodes encountered in the document. Each node corresponds to each element.
It will then analyze the style data, contained in the external CSS files, but also those which are directly inserted into the HTML document, the style elements. This information will be used to create another tree.
The render tree contains rectangles with visual attributes like colors and dimensions. The rectangles are in the correct order to be displayed on the screen.
After the construction of the rendering tree, the engine will obtain the exact coordinates where it will have to make the elements appear on the screen. It will be 'read' and each node will be drawn using the UI background layers.

What you have to keep in mind is that it is a gradual process. The renderer will display whatever content it can get onto the screen as soon as possible. It won't wait for all the HTML code to be parsed before starting to build the final view.

You have certainly already noticed this phenomenon when your internet connection is slower than usual, and the web page seems 'broken'. Indeed, web pages are not displayed line by line, starting from top to bottom, like images. The lower part of the page may very well be displayed first if the upper part is heavier to load. Parts of the content will be parsed and displayed, while the process continues with the rest of the page continuing to load. The last elements to be displayed being the heaviest images.
[separator type=”” size=”” icon=”star”]

The main HTML rendering engines

– Geckos

Originally “NGLayout”, Gecko is open source and free, it was launched by the Mozilla Foundation in 1998, when Netscape published the source code of its web browser Netscape Navigator, thus making it open source. Netscape then created the Mozilla Foundation, with the aim of continuing to develop Navigator. Gecko is then an integral part of Netscape Navigator.

It was designed to read HTML, CSS, XUL and JavaScript and interpret them. It is found in various applications such as Firefox, Thunderbird, Netscape Navigator, AOL Explorer or Camino. Products using the same version of Gecko have identical standards support.
Gecko's goal is a portable engine that respects web standards and W3C recommendations. It works on Windows, Linux and Mac OS X2 operating systems. It is written in the C++ programming language and distributed under the MPL, GPL and LGPL3 licenses. (Source: Wikipedia)

– Trident

Trident is the name of the web page display engine used in Internet Explorer in its Windows versions, and by extension, all browsers based on Internet Explorer. It is also often referred to as “MSHTML”, corresponding to the name of the engine's dynamic link library. It is developed by Microsoft in C++

It was designed as a software component of the COM layer, allowing developers to add engine functionality to their applications in any development environment supporting COM, including Visual Studio. (Source: Wikipedia)

–Webkit

WebKit is a free software library allowing developers to easily integrate a web page rendering engine into their software. It is available under the BSD and GNU LGPL license. Originally reserved for the Mac OS X operating system (from version 10.3 Panther), it has been ported to Linux and Windows. Thus the port of WebKit for the GTK+ and Qt environments are called respectively WebKitGTK+ and QtWebKit.

WebKit is a fork of the KHTML rendering engine of the KDE project used in particular in the Konqueror browser. It integrates two sub-libraries: WebCore and JavaScriptCore corresponding respectively to KHTML and KJS.
It successfully passes the Acid2 test and the version in development obtains 100% in the Acid3 test since March 27, 2008.
Webkit integrated a JavaScript engine that bore the same name. It has since been rewritten, the new engine is now called SquirrelFish, much faster than the previous one.
In February 2012, the success of WebKit's dissemination led "the OpenWeb group, advocating the standardization of web development technologies, to launch an appeal to developers and to point out the consequences of WebKit's dominance on mobile and developer practices" . In January 2013, the dominant position of Webkit still poses a problem. (Source: Wikipedia)
Google recently left Webkit to create your own rendering engine, Blink.
The rest… Soon 🙂
Emmanuelle Guyot – UX-Scientist