Today, it is difficult to imagine a world without internet.

The web browser is at the heart of how we experience the internet. Every day, millions visit websites via browsers. Five major browsers — Chrome, Firefox, Internet Explorer, Safari and Opera — account 95% of web traffic.

A major role of a web browser is to accept a web URL via an address bar, fetch resources, and display them on the screen.

Browsers functionality can be classified into four major sections and these include:

• Fetch
• Process
• Display
• Storage

Each category defines a set of duties that browser has to execute and comprises of subsystems.

Fetch

A major subsystem called network layer plays a vital role in fetching data from subsequent web servers via the internet.

The Network Layer

Accepts URLs from the browser user interface and is responsible for making network calls to fetch resources via HTTP/FTP protocols.

It feeds data to the process subsystem called rendering engine as it becomes available and is usually done in byte size to improve performance

If the requested website implements a cache, a copy of the data is made in App Cache or Service Workers for next time. Caches are great for their quick response times and saving network requests for regular visits.

The browser initially looks for any cache availability on local memory for requested URLs. Otherwise, the network layer creates an HTTP packet with a domain name for requesting a web resource over the internet.

The network layer plays a major role in the user experience. It can be a bottleneck in web performance, since browsers wait for remote data/content to arrive. Various techniques can be used to reduce this impact on the user’s experience.

Process

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.

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.

Display

As the name itself suggests, this relates presenting data to the users. User Interface and Browser Engine are responsible for data presentation and handling user navigation.

User Interface

The visual appearance of the browser normally includes an address bar to accept web URLs, and navigation buttons such as a back, forward, refresh, and a home and bookmarks bar.

Along with these inputs and action buttons, we have the viewport (the main part of the screen) to display content fetched from websites.

The User Interface (UI) communicates with other subsystems within the browser to display content and act accordingly.

No specific standards are imposed on how the interface should look and feel. Instead, browser vendors have refined the UI as browsers have evolved over the years.

The browser engine

The browser engine is an embeddable subsystem that provides a high-level interface to the rendering engine.

It loads a given URL and supports primitive browsing actions such as navigating forward, back and reload.

It also provides hooks for viewing various aspects of the browsing session. For example, viewing current page load progress and JavaScript alerts.

The browser engine also allows for querying and manipulating the rendering engine settings.

Storage

Web browsers have a small amount of storage capacity in order perform few actions, cache data and store data over browser for perform kicks and other browser functionality.

Data Storage

Data persistence is achieved through various browser APIs. Some of them include:

• Local storage
• Session Storage
• Cookies
• WebSQL
• IndexedDB
• FileSystem
• AppCache
• Service Workers

Local storage and Session storage are key-value pairs that can store any JS objects and functions in the browser.

Session storage persists the data on the browser as long as a website session is active. Local storage is the memory on the browser. It persists data until it is cleared or altered explicitly by the user or JavaScript code.

These Session and Local web storage limits are 5MB per object, and 50MB per system.

Cookies are collections of key-pair data stored on the browser memory. They are sent back and forth between client and server.

These are expensive and are the least performant of the data persistence methods. However, they are very useful when privacy and security come into the picture.

WebSQL, IndexedDB, and FileSystem have the abilities to store data on browser depending on size, performance, and necessity.

App Cache was introduced in HTML5. It stores website static content and serves UI content during network downtime.