This step involves accepting data from the network layer and feed the display subsystems. Render engine, JS engine and UI backend subsystems are part of the process.
The rendering engine
The rendering engine subsystem processes data from the network layer and displays web content on the screen.
By default, it can process HTML, XML and Image files. However, it can be extended to accommodate various data types via extensions.
Many render engines are available, and are usually written in C++. Examples include:
- Chrome and Opera both use Blink
- Firefox uses Gecko
- Internet Explorer uses Trident
- Edge uses EdgeHTML
- Safari uses WebKit
With rendering engines, web resources are parsed. For example, a HTML parser converts a HTML template into an object called the DOM tree.
Stylesheets are parsed to generate style rules for both external and inline style elements.
A render tree is an object that combines both the parsed HTML and CSS. It is generated with visual instructions and attributes to render elements on the user’s screen.
Once the render tree is constructed, it undergoes layout and painting processes, and displays the output on the screen.
The layout process includes calculating dimensions and exact coordinates where each element should appear on the viewport.
The painting process includes filing the layout with style attributes like color, background and other CSS properties.
The rendering engine processes data in chunks and displays the content as soon as possible. It will not wait until the entire document content undergoes the layout and painting processes.
One of the most popular engines is the Google V8 engine. It is written in C++. Here are some examples that different browsers use:
- Chrome uses Chrome V8
- Firefox uses SpiderMonkey
- Edge uses Chakra
- Internet Explorer uses Chakra (JsScript)
These engines include two components: the memory heap and the call stack.
The memory heap is where memory is allocated for variables, functions and other JS elements.
The call stack is simply a queue of stack frames or sequential steps executed by the browser.
These engines have several threads internally to perform various tasks. Examples of such tasks include:
- Fetching, compiling and executing code
- A profiling thread to analyze functions and their time consumption
- Optimizing the execution process
- Garbage collectors
Google’s V8 engine uses a mark-and-sweep method to perform garbage collection in an incremental way. This makes use of the browser’s idle time and improves performance.
As of version 5.9 (early 2017), Ignition and Turbofan are the latest pipelines in the V8 engine.