What is Browser Engine and How Does It Work?

A web browser is a software application for accessing information on the Internet. Each individual web page, image, and video is identified by a distinct Uniform Resource Locator (URL), enabling browsers to retrieve these resources from a web server and display them on a user's device.

When you choose a web browser, you’re also choosing a browser engine and a rendering engine - sometimes these two terms are used separately and sometimes to mean the same thing.

What is a Browser Engine?

A browser engine is a core software component of every major web browser. The primary job of a browser engine is to transform HTML documents and other resources of a web page into an interactive visual representation on a user's device. The engine combines all relevant CSS rules to calculate precise graphical coordinates for the visual representation it will show on the screen. To complete the process, the engine makes the necessary system calls. For those preparing for PHP interview Questions, understanding the role of browser engines in web development is crucial, as it underpins how PHP-generated HTML is rendered to users.

The browser engine is to take the HTML, CSS and other code of a web page - the text you can see in the page source or open in a text editor, setting out layouts, page content, and styling - and convert it into what you actually see on screen.

Technically, the rendering engine renders pages and the browser engine handles comms between the rendering engine and the browser user interface.

The browser engine, rendering engine, and JavaScript engine are all essentially working together to get raw web code into a viewable and usable-form inside your browser.

Browser engines may be used in other types of programs besides web browsers.

Multiple Browser Engines

Because of the Web platform is a set of open standards, there are multiple browser engine implementations.

Gecko

It's a Mozilla's browser engine. It's used in the Firefox web browser, the Thunderbird email client, and the SeaMonkey internet suite. Goanna also is a fork of Gecko used in the Pale Moon browser.

WebKit

This engine created by Apple for its Safari browser, by forking the KHTML engine of the KDE project.

Google also used WebKit for its Chrome browser, but eventually forked it to create the Blink engine.

Blink engine

All Chromium-based browsers use Blink, as do applications built with CEF, Electron, or any other framework that embeds Chromium.

Trident and EdgeHTML

Microsoft formerly developed its own proprietary browser engines - Trident and EdgeHTML, though now uses Blink for its Edge browser.

Servo

It's an experimental browser engine developed to take advantage of the memory safety properties and concurrency features of the Rust programming language. The project was initiated by Mozilla Research with an effort from Samsung to port it to Android and ARM processors.

How Does Browser Engine Work?

In some ways the engine is like a translator, turning the raw code that you can’t understand into a beautifully laid out page of text and graphics that you can.

The browser engine makes choices about how to interpret what a web developer has typed, in-fact, how particular lines of code affect what’s on screen. The browser engine is the most important part of the browser. Browser engines are the main reason that web pages sometimes look, load, and work differently in different browsers. As well as existing web standards, browser engines also need to support new standards as the internet gets ever-more complex.

The data that makes up a web page is lots of things, but it’s mostly broken down into 3 parts:

• code that represents the structure of a web page
• code that provides style: the visual appearance of the structure
• code that acts as a script of actions for the browser to take: computing, reacting to user actions, and modifying the structure and style beyond what was loaded initially

The browser engine combines structure and style together to draw the web page on your screen, and figure out which bits of it are interactive. It all starts with structure.

When a browser is asked to load a website, it’s given an address. At this address is another computer which, when contacted, will send data back to the browser. This data is sent back in a format called HTML, and it describes the structure of the web page.

Browser engines contain special pieces of code called parsers that convert data from one format into another that the browser holds in its memory.

The in-memory structure of the web page is called the Document Object Model, or DOM. As opposed to a long piece of text, the DOM represents a tree of elements of the final web page: the properties of the individual elements, and which elements are inside other elements. The HTML also includes addresses where styles and scripts can be found. When the browser finds these, it contacts those addresses and loads their data.

Once the browser engine has computed styles, it’s time to put it to use! The DOM and the computed styles are fed into a layout engine that takes into account the size of the window being drawn into. The layout engine uses various algorithms to take each element and draw a box that will hold its content and take into account all the styles applied to it.

When the layout is complete, the engine turns the blueprint of the page into the part you see. This process is known as painting, and it is the final combination of all the previous steps. Every box that was defined by layout gets drawn, full of the content from the DOM and with styles from the CSS. The user now sees the page, reconstituted from the code that defines it.

Google's search engine is a powerful tool, but the internet is a big place. It's sometimes hard to find what you're looking for. Google can help narrow down what you're looking for with specialized searches. You can browse through the different categories that pertain to your keywords. It uses a special algorithm to determine its search results. It also uses automated programs called spiders or crawlers, just like most search engines, to help generate its search results. Google has a large index of keywords that help determine search results.

Google also uses a trademarked algorithm called PageRank, which assigns each Web page a relevancy score. The best way to make sure your Web page is high on Google's search results is to provide great content so that other sites will link to your page. The more links your page gets, the higher its PageRank score will be. If you attract the attention of sites with a high PageRank score, your score will grow faster.

This helps Google remain competitive with other search engines and reduces the chance of someone finding out how to abuse the system.

Stock photo from 32 pixels