Dive into how web browsers work (with illustrations) ⚙️🚀 | by Tapajyoti Bose | March 2023

browsers are now part of everyday life, but have you ever wondered how they work under the hood?

This article will take a closer look at the magic behind the scenes of the web browsers.

Let’s begin! 🚀

navigation is the first step in loading a webpage. It happens when the user types a URL in the address bar or click on a link.

1.1. DNS lookup

The first step is to find them IP address where the resources are located. This is done through a DNS lookup.

The Domain Name System (DNS) server is a server dedicated to matching website hostnames (such as www.example.com) to their corresponding internet protocol or IP addresses. The DNS Server contains a public database IP addresses and their corresponding domain names

For example, if you visit www.example.com, the DNS servers will return it IP address 93.184.216.34 this is its equivalent IP address.

1.2. 3-way TCP handshake

The next step is to a TCP connection to the server. This is done through a 3-way TCP handshake.

First the client sends a request to open a connection to the server with a SYN package.

The server then responds with a SYN-ACK packet to confirm the request and ask the client to open a connection.

Finally, the client sends a ACK packet to the server that confirms the request.

1.3. TLS handshake

If the site uses HTTPS (encrypted HTTP protocol), the next step is to a TLS connection about a TLS handshake.

During this step, some more messages are exchanged between the browser and the server.

1. Client says hello: The browser sends the server a message containing which TLS version and cipher suite it supports, and a sequence of random bytes called client random numbers.
2. Server hello message and certificate: The server sends back a message containing that of the server SSL certificatethe cipher suite chosen by the server and the server random (a random byte sequence generated by the server).
3. authentication: The browser checks that of the server SSL certificate at the certification authority that issued it. This way the browser can be sure that the server is who it says it is.
4. The premaster secret: The browser sends another random byte sequence called Premaster Secret encrypted with a public key which the browser takes from the SSL certificate from the server. The Premaster Secret can only be decrypted with private key through the server.
5. Private key used: The server decrypts the premaster secret.
6. Session key created: The browser and the server generate session key from the random client, from the random server and from the Premaster Secret.
7. customer ready: The browser sends a message to the server that it is ready.
8. servers ready: The server sends a message to the browser that it is also ready.
9. Secure symmetric encryption achieved: The handshake is complete and communication with the can be continued session key.

Now the requesting and receiving of data from the server can begin.

After TCP connection is set up, the browser can start retrieving resources from the server.

2.1. HTTP request

If you have web development experience, you will have come across the concept of HTTP requests.

HTTP requests are used to get resources from the server. It requires one URL & Kind of request (RECEIVE, POST, SET, EXTINGUISH) are processed. The browser also adds some additional ones headers to the request to provide additional context.

The first request sent to a server is usually a RECEIVE Request to get a HTML File.

2.2. HTTP response

The server then responds with a corresponding HTTP response for the given request.

The answer contains the status codeThe headers & The Body.

Now comes the main part. After the browser dies HTML file, it parses it to generate the Dom (document object model) Tree.

This is done by the browser engine, which is the core of the browser (e.g.: Gecko for Firefox, Webkit for Safari, Blink for Chromeetc).

Here is an example HTML File:

Hello World!

3.1. tokenization

The first step to displaying the webpage is tokenizing the HTML File. tokenization is called the process of splitting a string into meaningful parts for the browser tokens.

tokens are the basic building blocks of DOM tree.

3.2. DOM tree construction

lexical is the process of converting a sequence of tokens into a tree structure called DOM tree.

The DOM tree is a tree data structure representing the nodes in the HTML document.

NOTE: If the page requires external resources, it will be treated as follows:

1. Non-blocking resources are picked up in parallel. Example: pictures.
2. Deferring Resources are fetched in parallel but executed after DOM tree is constructed. Example: script WITH defer attribute & CSS files.
3. blocking of resources are retrieved and executed one after the other. Eg: script WITHOUT defer Attribute.

After DOM tree is built, the browser parses the CSS File to generate the CSSOM (CSS object model).

This process is similar to DOM tree Construction using tokenization and generation of the CSSOM

As mentioned before, if the site requires blocking scriptit will be retrieved and executed immediately while the DOM tree Construction paused, otherwise die script will be retrieved and executed after DOM tree construction is complete.

No matter when script is running, it will be handled by the JavaScript engine who also like them browser engine varies from browser to browser.

5.1. JIT compilation

Assuming you know the concept of Interpreter & compilerThe JavaScript Motor uses a hybrid approach called JIT (Just in time) compilation.

JIT stands for Just in timewhich means unlike a compiled language such as Cat which the compilation takes place ahead of time (i.e. before the actual execution of the code), with JavaScriptThe compilation takes place during execution

The time has come make the page. The browser uses the DOM tree & CSSOM to render the page.

6.1. Render tree construction

The first step is to construct the render tree. The render tree is a subset of DOM tree which contains only the elements that are visible on the page.

6.2. layout

The next step is to lay out the render tree. This is done by calculating the exact size and location of each element in the render tree.

This step happens every time we change something in the Dom that affect the layout of the page, even partially.

Examples of situations where the positions of the elements are recalculated are:

1. Add or delete items from the Dom
2. Change the size of the browser window
3. Exchange width, heightor the position an item

6.3. To paint

Ultimately, the browser decides which node must be visible and calculates their position in the viewportit’s time to to paint them (render the pixels) on the screen. This phase is also called screening phasewhere the browser converts each element calculated in the layout phase to the actual one pixel on the screen.

Just like them layout phasethis phase occurs every time we change the appearance of an element to Domeven partially.

Examples of situations where the positions of the elements are recalculated are:

1. Exchange outline an item
2. Exchange opacity or visibility an item
3. Exchange background color an item

6.4. Layering & compositing

The last step is to put the layers together. This is done by the browser to optimize the rendering process.

Put together is a technique for dividing parts of a page into layers, to paint they separated and compositing as a page in a separate thread called the compositor thread. If parts of the document are drawn in different layers and overlap, compositing is necessary to ensure that they are dragged onto the screen in the correct order and the content is rendered correctly

NOTE: Dom updates, in particular layout & to paintare extremely complex operations, which can be clearly noticeable low-end devices. It is therefore important to minimize the number of trips.

That’s it folks! 🎉