We're live-coding on Twitch! Join us!
Browser Life Cycle

Browser Life Cycle

Every time, When URL (Uniform Resource Locator) is typed in the Browser’s address bar, We all fascinated about 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.

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

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.

Cache, We meant about 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 is available that helps 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.

Lets have a look at below diagram how browser request and check for the four levels of Caches, if one is not exist.

Four Level Cache

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. HTTP Request & Response Browsers Network Layer manages HTTP Request and Response. Below diagram helps to understand how HTTP Request and Response is being Sent and Received.

Server Response

Shush, Be quiet.** Its 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 helped 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 different Content Type.

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

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

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 Image

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

Response Header of JavaScript

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.

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 parse the markup document and createthe Well Formed document and construct the Object is 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 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 converted to actual pixels on browser Screen.

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

Painting Handling JavaScript There is one exceptional Response, It is our Super Hero JavaScript who can do things dynamically. No matter its 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 is any errors found in that particular JavaScript file.

Scripting Engine

*Happy Coding *!