Browser: Complete Process Of Hitting A URL And Rendering The Page.

Acknowledgments: My post is inspired by the famous what-happens-when GitHub repository.

Ever wondered what happens when you type in an URL in the browser? What happens behind the scenes to fetch the page? How does the page load?

Read on to find out.

1. You type maps.google.com(Uniform Resource Locator) into the address bar of your browser and press enter.
2. Every URL has a unique IP address associated with it. The mapping is stored in Name Servers and this procedure is called Domain Name System.
3. The browser checks its cache to find the IP Address for the URL.
   • If it doesn't find it, it checks its OS to find the IP address (gethostname);
   • It then checks the router's cache.
   • It then checks the ISP's cache. If it is not available there the ISP makes a recursive request to different name servers.
4. It checks the com name server (we have many name servers such as 'us', 'gov', 'io' etc) and it will redirect to google.com.
5. google.com's name server will find the matching IP address for maps.google.com in its’ DNS records and return it to your DNS recursor which will send it back to your browser.
6. Browser initiates a TCP connection with the server. It uses a three-way handshake:
7. Client machine sends an SYN packet to the server over the internet asking if it is open for new connections.
8. If the server has open ports that can accept and initiate new connections, it’ll respond with an ACKnowledgment of the SYN packet using an SYN/ACK packet.
9. The client will receive the SYN/ACK packet from the server and will acknowledge it by sending an ACK packet. Then a TCP connection is established for data transmission!
10. The browser will send a GET request asking for a maps.google.com web page. If you’re entering credentials or submitting a form this could be a POST request.
11. The server sends the response.
12. Once the server supplies the resources (HTML, CSS, JS, images, etc.) to the browser it undergoes the below process: Parsing - HTML, CSS, JS Rendering - Construct DOM Tree → Render Tree → Layout of Render Tree → Painting the render tree
13. The rendering engine starts getting the contents of the requested document from the networking layer. This will usually be done in 8kB chunks.
14. A DOM tree is built out of the broken response.
15. New requests are made to the server for each new resource that is found in the HTML source (typically images, style sheets, and JavaScript files).
16. At this stage the browser marks the document as interactive and starts parsing scripts that are in "deferred" mode: those that should be executed after the document is parsed. The document state is set to "complete" and a "load" event is fired.
17. Each CSS file is parsed into a StyleSheet object, where each object contains CSS rules with selectors and objects corresponding CSS grammar. The tree built is called CSSCOM.
18. On top of DOM and CSSOM, a rendering tree is created, which is a set of objects to be rendered. Each of the rendering objects contains its corresponding DOM object (or a text block) plus the calculated styles. In other words, the render tree describes the visual representation of a DOM.
19. After the construction of the render tree it goes through a "layout" process. This means giving each node the exact coordinates where it should appear on the screen.
20. The next stage is painting–the render tree will be traversed and each node will be painted using the UI backend layer.
21. Repaint: When changing element styles that don't affect the element's position on a page (such as background-color, border-color, visibility), the browser just repaints the element again with the new styles applied (that means a "repaint" or "restyle" is happening).
22. Reflow: When the changes affect document contents or structure, or element position, a reflow (or relayout) happens.