What happens when I type any URL in the browser ?

Google Chrome, Internet Explorer, Mozilla Firefox, Safari, these are not unfamiliar names today to most of the Internet using people. In today’s time, we all are quite familiar with these web browsers, the most widely used software in the world. In that top wide white box, you write the website address whichever you want to navigate to like www.facebook.com, www.google.com, www.medium.com and in a jiffy that page shows up. Have you ever wondered how does that website appear on your screen? This article is meant for those who are oblivious to the working of the browser, wants to see the trick behind the magic that makes the website appear on your screen

What is a browser?

In geeky terms, a browser is a software program used to present and explore content on the World Wide Web. These pieces of content, including pictures, videos, and web pages, are connected using hyperlinks( similar to web page address) and classified with Uniform Resource Identifiers (URLs). The first one was created by the inventor of WorldWideWeb itself, by Tim Berners-Lee in 1990. After that, there are now numerous web browsers available for the consumer to use with multi-functional capabilities.

A browser always needs a server (a computer designed to process requests and deliver data to other (client) computers over a local network or the internet). When you type any URL(Uniform Resource Locator) of any web page in the address bar of your browser, it fetches the HTML files containing images, PDF, videos, flash files from the server, interprets them and then displays it on your screen.

But, how does the browser interprets these HTML files? Now, how does the browser interprets these HTML files? The HTML and CSS specifications for the way browser will show the web page are maintained by the W3C (World Wide Web Consortium) organization, which is the main international standards organization for the World Wide Web.

What happens when I type any URL in the browser?

When you type any URL in the web browser, in order to load the page, it first have to find the IP address of the web server. It asks the Operating System (OS) to check the server name in local cache. If it is there in cache, then Rendering Engine renders the web page.

1. Check browser cache: In order to load the page, browser first have to find the IP address of the web server. Browsers maintain cache of DNS records for some fixed duration. So, this is the first place to resolve DNS queries. It checks local cache, if requested object is in cache and is fresh, skip to step 9
2. Check OS cache: If browser doesn’t contain the record in its cache, it makes a system call to underlying Operating System to fetch the server’s IP address as OS also maintains a cache of recent DNS queries.
3. Router Cache: If above steps fail to get a DNS record, the search continues to your router which has its own cache.
4. ISP cache: If everything fails, the search moves on to your ISP. First, it tries in its cache, if not found — ISP’s DNS recursive search comes into picture. DNS lookup is again a complex process which finds the appropriate ip address from a list of many options available for websites like Google.
5. After finding the IP address, the browser initiates a TCP connection with the server (this step is much more complex with HTTPS).
6. Browser sends a HTTP GET request to the server according to the specification of HTTP(Hyper Text Transfer Protocol) protocol through TCP connection.
7. Browser receives HTTP response and may close the TCP connection, or reuse it for another request
8. After getting the requested file, the browser has two things to do: interpret and render the HTML page, and obtain the remaining objects (images, flash files, javascript files, css files, audio, video, etc.) and interpret and display them.
9. Some browsers will begin to interpret and render the HTML file immediately and request the objects in parallel, filling in the objects as they are received. Others will wait to received all objects and, just then, will render and display the HTML file.
10. Rendering of html content is also done in phases. The browser first renders the bare bone html structure, and then it sends multiple GET requests to fetch other hyper linked stuff e.g. If the html response contains an image in the form of img tags such as <img src=”/assets/img/set.png” />, browser will send a HTTP GET request to the server to fetch the image following the complete set of steps which we have seen till now. But this isn’t that bad as it looks. Static files like images, javascript, css files are all cached by the browser so that in future it doesn’t have to fetch them again.

That’s it. The browser will then rest waiting the user to request another file to begin everything again.