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.
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.
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.
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.
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 (22.214.171.124) which is helped to make HTTP Request.
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”.
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”.
CSS Response Header Below is the Response Header of Stylesheet File and Content-Type is “text/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.
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 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”.
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.
*Happy Coding *!