top

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!
Rated 4.0/5 based on 12 customer reviews
Normal Mode Dark Mode

A Step-By-Step Guide For Decoding Browser

Venkatraman Ramamoorthy
Blog
12th Apr, 2018
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

                                                           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


                                                           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.

Four Level Cache

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.

HTTP Request & Response
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.

Shush, Be quiet. It’s not over.
                                                                          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”.

 Responses Content Types:
                                                                                    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”.

 Image Response Header
                                                                                                Response Header of HTML


3. JavaScript Response Header

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

 JavaScript Response Header
                                                                                              Response Header of JavaScript


4. CSS Response Header

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

CSS Response Header

                                                                                                     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.

Rendering Engine

                                                               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                                                                 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
                                                                                                   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.

Painting (Stage Show)


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.

Handling JavaScript

 

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

Cool isn’t it! Happy Browsing!

Venkatraman

Venkatraman Ramamoorthy

Blog Author
Front-end Architect ★, Tech Writer ★, Open Source Enthusiast

Leave a Reply

Your email address will not be published. Required fields are marked *

Top comments

Affrica Cook

12 November 2018 at 2:28pm
Very helpful!

SUBSCRIBE OUR BLOG

Follow Us On

Share on

other Blogs

20% Discount