A Step-By-Step Guide For Decoding Browser

A browser is used to access the worldwide web fastly and securely. Every time, When URL (Uniform Resource Locator) is typed in the Browser’s address bar, we are all fascinated by the Web page appearance. Everyone is not intended but Web developers, mainly to know what exactly happening inside to get you the nice attractive web page.
This beginner’s guide will give you a detailed guideline on the complete process of decoding browser.
 

                                                           Address Bar

Let’s imagine that you want to access Stack Overflow Website and typed “https://stackoverflow.com/" in the Address bar which is part of browser’s User Interface will talk to Network layer.

                                                           User Interface (Address Bar) to Network Layer

By considering the above example, here, we will clearly demonstrate the continuous steps to decoding browser.

The Network layer checks the Cache for a DNS record to find the corresponding IP address of domain “StackOverflow.com”.

What is Cache?
A collection of data duplicating original values stored elsewhere on a computer, usually for easier access.

By Cache, we meant Web Cache.

What is Web Cache?
A web cache (or HTTP cache) is an information technology for the temporary storage (caching) of web documents, such as HTML pages and images, to reduce server lag. For example: ETag, CDN).

Four Level Cache

There will be four levels of Cache available that help to check for DNS Records to find Domain IP Address.

What is DNS?
The Domain Name System (DNS) is a hierarchical decentralized naming system for computers, services, or other resources connected to the Internet or a private network.

The very first step to make the most out of the tips to decoding browser is an understanding of the different caches used. Let’s have a look at the below diagram for browser request and check for the four levels of Caches, if one does not exist.



1. Browser Cache—Check whether you visited earlier for DNS cache where browser maintains own cache of DNS.
2. OS Cache—When Browser Cache is not available, browser would make System call for the DNS Cache information maintained by Operating System.
3. Router Cache — When Browser and OS Cache are not available, it will look for Router Cache.
4. ISP Cache — When above all three Caches are not available, ISP’s DNS server initiates a DNS query to find the IP address of the server that hosts Stack Overflow.com.

Assume, Network layer worked closely with the DNS Record Search to find the IP Address using the corresponding domain (StackOverflow.com).

Now, we found the IP Address from DNS Record to proceed further. Cool, our next step is sending request and receiving the Response. In the following section, we shall explore the ways how to manage HTTP Request and Response for an effective browser decoding.

HTTP Request & Response

Browser’s Network Layer manages HTTP Request and Response. Below diagram helps to understand how HTTP Request and Response are being Sent and Received.


Browser send TCP Connection with Stack Overflow Server through IP Address.

TCP Connection is established for data transmission.

Browser sends an HTTP Request to the Web Server.

StackOverflow Server send out an HTTP Response to Browser.

Shush, Be quiet. It’s not over.

We just got the HTTP Response. Now you see the below Network information where you can see IP Address (151.101.65.69) which is helping to make HTTP Request.


                                                                          Stack Overflow IP Address with HTTPS PORT (:443)

Responses Content Types: HTML, CSS, JavaScript

So always the Life Cycle of sending a request and receiving the response is same for all the various responses but every response we get has a different Content Type.

Below are the series of various responses. Imagine the phase that we got the response from network layer and yet to get passed to browser engine to process.

1. HTML Response Header

Below is the Response Header of every web page which is actually HTML of Content-Type is “text/HTML”.


                                                                                    Browser Response Header for HTML

2. Image Response Header

Below is the Response Header of PNG Image and Content-Type is “image/png”. There are different images available like JPEG which is “image/jpg”, GIF which is “image/gif” and SVG which is “image/svg+xml”.


                                                                                                Response Header of HTML

3. JavaScript Response Header

Below is the Response Header of JavaScript File and Content-Type is “text/javascript”.


                                                                                              Response Header of JavaScript

4. CSS Response Header

Below is the Response Header of Stylesheet File and Content-Type is “text/css”.



                                                                                                     Response Header of CSS

Rendering Engine

Browser User agent receives the Response and passes it to Rendering Engine which is also called as Layout Engine. Lets know about the rendering engine and how it works in order to understand the decoding browser bit-by-bit.

What is Rendering Engine ?
A rendering engine is a software that draws text and images on the screen. The engine draws structured text from a document (often HTML), and formats it properly based on the given style declarations (often given in CSS). Examples of layout engines: Blink, Gecko, Edge, WebKit.

                                                               Critical Rendering Path

Let’s take example response of HTML Content which is the text document in nature.
Rendering engine parses the markup document and creates the Well Formed document and constructs the Object called DOM and for CSS file its creates CSSOM

The CSSOM and DOM trees are combined into Tree is known as “Render Tree”.

                                                                 Render Tree of DOM and CSSOM —  Image Credit: https://developers.google.com

Render tree has DOM and CSSOM nodes which are needed to render the Web page. Layout that finds the accurate position and size of each object to draw the web page according to the Viewport of the device is called “Layout” Stage, also known as “Reflow”.

                                                                                                   Render Tree Formation

Painting (Stage Show)

This is the final act which is known as Painting / Rasterizing where the visible nodes from Render Tree are converted to actual pixels on browser Screen. 

The Output of the Layout Process is called Box Model where it adds padding, border, and margin.

Handling JavaScript

There is one exceptional Response, It is our Super Hero JavaScript who can do things dynamically. No matter whether it is HTML or CSS or both. But this guy handles nicely who is our Browser’s Scripting Language.

When there is a JavaScript Content-Type of Response, it will be communicated to the Scripting Engine of the Browser (Which is an Interpreter also JIT Compiler who does things in Run-Time) will execute the javascript code and through JavaScript, you can access DOM and CSSOM API to make it interactive.

It will throw a series of errors, if there are any errors found in that particular JavaScript file.

Hope this tutorial offered ample insights to understand the essentials of browser decoding bit-by-bit.

Cool isn’t it! Happy Browsing!