Web Browser Engine – Definition & Working

A web browser is a software application that lets you explore the internet. It retrieves and displays web pages, images, videos, and other content from web servers. Each piece of content has a unique address called a URL (Uniform Resource Locator), which tells the browser where to find it.

While we often focus on the browser itself (Chrome, Firefox, Edge, etc.), each choice also determines the underlying browser engine and rendering engine. These core components work together to create the web experience we see. Though sometimes used interchangeably, they have distinct roles. Here, In this article, we are going to study the browser engine and how it works under the hood.

What is a Browser Engine?

Think of a browser engine as the heart of your web browser. It is the essential software that acts as a bridge between the web page’s code (HTML, CSS, JavaScript) and the visual experience you see on your screen. Here’s what it does:

• Starts the Process: The browser engine handles the initial request to load a web page and coordinates the resources needed.
• Navigation: It manages your browsing actions – things like going back, forward, or reloading.
• Error Handling: The browser engine gracefully displays error messages if something goes wrong.
• Visual Layout: It works behind the scenes, using HTML and CSS to calculate the precise position and appearance of every element on the page.

Types of Browser Engine:

As we have talked earlier there are many web browsers and each of them uses different types of Browser engines. Here we will see some of the browser engines that are majorly used in most popular web browsers.

1. WebKit:

WebKit engine is the most popular and most used engine it was created by Apple for its Safari Browser by forking the KHTML engine of KDE project. Later that, Google also used the same WebKit engine of its chrome browser but eventually, a modified version of this engine was forked by the Blink engine.

2. Gecko:

Gecko is the Mozilla’s engine which is used in many different types of Firefox Browsers, the Thunderbird email client and SeaMonkey internet suite. It is licensed as Mozilla Public and Goanna is also a fork version of Gecko which is used in the Pale Moon, Basilisk and K-meleon Browsers.

3. Blink:

All the modern web browsers that are based on chromium browser use the Blink engine. On this engine many other applications are built onto it like CEF, Electron or any other framework that is based on chromium.

4. Servo:

To take the advantage of the memory safety properties and concurrency features of the Rust programming languages servo was developed as the experimental browser engine. This experimental project was initiated and lead by the Mozilla Research with the support from Samsung to port it to Android devices and ARM processors.

5. Trident and EdgeHTML:

Both of these engines are developed and maintained by the tech giant Microsoft. The famous Internet Explorer was built using the Trident engine. Formerly Edge Browser uses the EdgeHTML though now uses the Blink engine.

Quick Overview of Different Types of Web Browser

Engine	Developers	Browsers	Notes
WebKit	Apple	Safari, Chrome (until 2013), many Chromium-based browsers	Known for its speed and rendering capabilities. Forms the basis for many modern browsers
Gecko	Mozilla	Firefox, Thunderbird, SeaMonkey	Emphasizes adherence to web standards
Blink	Google (Fork of WebKit)	Chrome, Edge (since 2019), most modern Chromium-based browsers	Focuses on performance and Features
Servo	Mozilla Research (Experimental)	None (Under Development)	Explores the potential of Rust for safety and parallelism in browser engines
Trident	Microsoft	Internet Explorer	Legacy engine for Internet Explorer
EdgeHTML	Microsoft	Edge (until 2019)	Successor of Trident, now replaced by Blink

How does browser engine work?

Browser Engine is like a translator which turns your raw code into a beautifully laid out page of text and visual graphics which you will be able to understand easily and it is the most important component of the browser. Browser engines are the main reason that a web pages look, load, work different in different browsers. We will understand the working of Browser Engine in steps so that we can easily understand it. Now, let’s look at some steps that involved in rendering the web page.

1. Whenever the user pass some URL from the User Interface the browse engine receives the URL and it sends the request to the networking component which handles the communication with the web server and retrives the HTML document and other resources like images, videos, text, stylesheets, script etc.
2. After retrieving the HTML document the browser engine passes it to the rendering engine, which parses it and constructs a tree-like data structure called Document Object Mode (DOM). The DOM simply represents the logical structures and content of the web page in a tree like structure.
3. Whenever the browser engine computed the styles, it takes the DOM and the computed style and pass it to the Layout engine that uses various algorithms to handle each element of the DOM and draw a box that holds the content and apply all the style that are instructed.
4. After the completion of layout, the engine makes a blueprint of the web page into part you usually see on the screen. This whole process is known as Painting. Every box that was defined by the layout engine get drawn of painted on the screen and user finally sees the complete web page. It also executes any scripts that are attached to the web page, which may modify the DOM or perform other actions, such as adding interactivity or animation.

All the above steps discussed do not necessarily happen in sequential or discrete it may happen that the process overlap or run in parallel it all depends on the implementation of the browser engine and the rendering engine. That’s the main reason why we see different visual representations or behaviors of same web page in different browsers.