How Do Web Browsers Work?


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

WebKit Main Flow

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.

The JavaScript engine

This is the subsystem for parsing JavaScript code to machine code and then executing it. These JS engines can be standard interpreters or JIT (just in time) compilers.

One of the most popular engines is the Google V8 engine. It is written in C++. Here are some examples that different browsers use:

JavaScript Engine

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.

JavaScript is a single-threaded process and each entry or execution step is a stack frame.

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.

NodeJS is a server-side JavaScript runtime built based on Google’s open source V8 engine. It is used to execute JavaScript on the server side.

read original article here