Behind the Browser, Part 1: The Basics

Web Browser Components (Credits — https://www.html5rocks.com)

As a web developer, learning about browsers' internal operations and their architecture helps you to make better decisions during development and to discover the best and worst practices.

Browser Functionality

Browsers operate to mainly display the web resources (HTML, XML, CSS, JS, JSON, PDF, etc.) you choose. In general, a browser requests this information from the server and the server responds to the browser window. The resource location is specified by the user using a URI (Uniform Resource Identifier).

W3C maintains the specification on how browsers should interpret and display the web page (HTML) and this has helped to solve compatibility issues between browsers that once existed.

Browser Components

Browsers have a set of components with a particular work flow. Let's have a look at each component in detail, one by one.

User Interface

The address bar is a good example. It interfaces with the user to insert a URI and interacts with various components to render a web page.

There are plenty of user interfaces for various needs, like Back and Forward Buttons, Bookmarks, Reload, and Stop and Home Buttons, which you see below.

Address Bar in Chrome

The interface layer communicates with the data layer to retrieve data. The interface layer also communicates with the UI Backend to draw widgets as per requests by the HTTP Response body (our HTML source code). The browser engine communicates between the UI and the rendering/layout engine.

Modern browsers now have interfaces (Dev Tools) which help you see the client data like Cookies, Local Storage, Session Storage, IndexDB, etc.

Browser Engine

It’s a bridge between the user interface and the rendering engine. It provides methods to initiate the loading of a URL and other actions like reload, back, and forward.

Layout/Rendering Engine

It’s able to render the content of a given URL in the browser screen and interprets the HTML, XML, and CSS. It is single threaded. By default, it displays data according to your specified content type (MIME). For example: HTML, Images, XML, CSS, JSON, PDF, etc.

A key operation of the rendering engine is the HTML Parser. Each browser uses various engines. Chrome and Opera use Blink, Firefox uses Gecko, IE Edge uses EdgeHTML, Internet Explorer uses Trident, and Safari uses WebKit.

What is the Flow?

1. Parsing an HTML document with the HTML Parser converts elements to Node and creates a Content Tree.

2. Parsing styles for code/documents with the CSS Parser and creates a Render Tree.

3. The Render Tree goes through the Layout Process. An element’s node gets position coordinates.

4. The Render Tree will be traversed and each node will be painted using the UI Backend Layer.

What is a Dirty bit system?

1. This will be used for small changes which don't require a full layout change.

2. It uses incremental layout asynchronously.

3. Its two flags are dirty and its children are dirty.

A Few Other Stages

Width calculation - It’s calculated using the container width attribute/style attribute.

Line Breaking - While a user is scrolling, the layout parent creates the extra renderers and calls the layout on them.

Painting

1. A render tree is traversed and the renderer’s “paint()” method is called.

2. The paint method is called to display content on the screen.

3. It uses the UI infrastructure component.

4. Painting order (background color, background image, border, children, outline).

Network

1. Networking handles all aspects of Internet communication and handles URLs to use with HTTP, FTP.

2. Implements a cache of retrieved documents to minimize network traffic.

JavaScript Interpreter — Scripting Engines

JavaScript Interpreter executes the JS code and sends the results to the rendering engine.

Each browser uses various scripting engines, for example, Chrome uses V8, Firefox uses Spider Monkey, IE Edge uses Chakra (JavaScript Engine), Internet Explorer uses Chakra (JScript Engine), Safari uses Nitro (JavaScript Core)

UI Backend

Backend helps to draw widgets like a select box, an input box, a check box, etc.

Data Persistence

This layer is persistent which helps the browser to store data (like Cookies, Local Storage, Session Storage, IndexedDB, WebSQL, and FileSystem) locally. 

Do All Modern Browsers Use the Same Engine?

No. Each Browser Development Team developed various Rendering and Scripting Engines. Below are the Layout and Scripting engines which are used by modern browsers.