Did you ever think about how the browser fetches the website using a URL, processes it and then displays it to the user?
Let's get acquainted with some terms before moving to the understanding how the whole cycle works.
What is a browser?
A browser is a software which manages to fetch the data using the URL and paints the browser screen to present it to the user, handles user interaction and the whole lifecycle of web applications.
What is a server?
A server is a system that hosts any application for the use of the target audience. There are many kinds of servers like web servers, file hosting servers, database servers etc.
Steps involved while accessing the website to get displayed in the browser
- User enters the URL in the browser and starts the search The browser starts searching for IP address in the local DNS lookup for resolving the URL, but if it's not found then goes to the service provider's DNS, and even then it's not found and goes to the global DNS lookup.
How the URL is resolved in the DNS lookup?
Let's start by understanding what is DNS? DNS is a domain name server with the database of URL attached with an IP address to locate and identify the server to fetch the required information.
Now coming to the point, www.google.com is resolved by starting from . level domain(top-level domain), then com is resolved, after that google is resolved and IP address is returned.
Browser sends a request to assigned IP address and fetches the HTML/CSS/JS files Getting the HTML/CSS/JS files from the server. It also includes bundled JS web applications built upon technologies like React.
Browser starts parsing the HTML, CSS and JS and paints the UI The browser starts with HTML, parses it and makes a DOM(Document object model). Similarly, CSS is processed and CSSOM(CSS object model) is created. JS files are processed according to
async/deferdirective and the final DOM is prepared.
Now, the first contentful paint is complete and the user can interact with the UI.
- User interacts with application After the user interactions, requests are made to the server and the whole browser paint and fetch cycles go on and on.
The browser also manages the request headers like authentication and protocol headers.
I hope you found this blog informative. Give a 👍 if you liked it.