Browser Life Cycle
Learn what happens when a URL is typed into the browser, from the different types of caches, to the HTTP request and response flow, to render trees.
Join the DZone community and get the full member experience.
Join For FreeEvery time a URL (Uniform Resource Locator) is typed in the browser’s address bar, we are fascinated by the web page's appearance. Mainly web developers are intended to know what exactly is happening inside to get you that nice attractive web page.
Address bar.
Let’s imagine that you want to access the Stack Overflow website and type “https://stackoverflow.com/" in the address bar, which is part of the browser’s User Interface, which will talk to the 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 the domain “StackOverflow.com.”
What Is Cache?
Cache is a collection of data duplicating original values stored elsewhere on a computer, usually for easier access.
When we say cache here, we mean 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 or CDN.
Four-Level Cache
There will be four levels of cache available to help check for DNS records to find the 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.
Let's have a look at the below diagram of browser requests and check for the four levels of caches.:
- Browser Cache—Check for the DNS cache where the browser maintains its own cache of DNS.
- OS Cache—When the browser cache is not available, the browser would make a system call for the DNS cache information maintained by the operating system.
- Router Cache — When the browser and OS cache are not available, it will look for a router cache.
- ISP Cache — When all three of the above caches are not available, the ISP’s DNS server initiates a DNS query to find the IP address of the server that hosts StackOverflow.com.
Assume that the network layer worked closely with the DNS Record Search to find the IP Address using the corresponding domain (StackOverflow.com).
We found the IP address from the DNS Record to proceed further. Our next step is sending the request and receiving the response.
HTTP Request & Response
The browser's Network Layer manages HTTP requests and responses. The below diagram helps to understand how HTTP requests and responses are being sent and received.
The browser sends a TCP Connection with the Stack Overflow Server through the IP Address.
The TCP Connection is established for data transmission.
The browser sends an HTTP Request to the Web Server.
The StackOverflow Server sends out an HTTP Response to the 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 the IP Address (151.101.65.69), which helps to make the HTTP Request.
Stack Overflow IP Address with HTTPS PORT (:443).
Response content types are HTML, CSS, and JavaScript. The lifecycle of sending a request and receiving the response is always the same for all the various responses, but every response we get has a different content type.
Below is the series of various responses; imagine the phase through which we got the response from the network layer and is yet to get passed to the browser engine for processing.
HTML Response Header
Below is the Response Header of every web page, which is actually HTML of the content type “text/HTML.”
Browser Response Header for HTML.
Image Response Header
Below is the Response Header of a PNG Image with the content type “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.
JavaScript Response Header
Below is the Response Header of a JavaScript file with the content type “text/javascript.”
Response Header of JavaScript.
CSS Response Header
Below is the Response Header of a Stylesheet File with the content type “text/css.”
Response Header of CSS.
Rendering Engine
The Browser User agent receives the response and passes it to the Rendering Engine, which is also called a Layout Engine.
What Is a Rendering Engine?
A rendering engine is 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 are Blink, Gecko, Edge, and WebKit.
Critical Rendering Path.
Let’s take an example response of HTML content, which is the text document in nature.
The rendering engine parses the markup document, creates the Well Formed document, and constructs the object called DOM; for CSS files, its creates CSSOM.
The CSSOM and DOM trees are combined into a Tree is known as the “Render Tree.”
Render Tree of DOM and CSSOM — Image Credit: https://developers.google.com.
The 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, called the “Layout” stage also known as “Reflow.”
Render Tree Formation.
Painting (Stage Show)
This is the final act, known as Painting/Rasterizing, where the visible nodes from the Render Tree are converted to actual pixels on the browser screen.
The output of the layout process is called a Box Model where it adds padding, borders, and margins.
Handling JavaScript
There is one exceptional response; It is our superhero JavaScript who can do things dynamically, no matter if its HTML, CSS, or both. This guy nicely handles 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, and also JIT Compiler who does things in runtime). It will execute the JavaScript code, and through JavaScript, you can access DOM and CSSOM APIs to make it interactive.
It will throw a series of errors if there are any errors found in that particular JavaScript file.
Cool, isn't it? Happy browsing!
Opinions expressed by DZone contributors are their own.
Comments