So earlier I wrote a blog about How the internet works?. After receiving an overwhelming response with 0 likes I decided to write a follow up.
In this blog we will learn about how exactly the browser renders a web page. Receiving the first bytes to painting pixels on the screen, here's how the browser does it.
After establishing connection with a web server (DNS lookup, TCP handshake and all that jazz), server responds to the browsers request (GET request mostly) with appropriate HTTP headers and contents of an HTML. This response contains the first bytes of our initial request. By this response we mean, earlier gossip between web browser and web server was just protocol related things, establishing connection etc.
Once we start receiving our initial chunk of data, which is usually 14kb of data. 14kb rule is a TCP slow start algorithm which starts slowly and increases the amount of data transmitted until the network's maximum bandwidth is determined. So after 14kb, the next packet will be 28kb and the next one will be 56kb and so on. You might want to pack the initial 14kb such that the browser can start rendering the page based on that, since no one loves a slow website.
Ok so now we have our initial chunk of data. Our initial 14kb, what to do next? The browser begin parsing the information. Wait what is parsing you ask. Parsing is simply browser turning the content received into DOM and CSSOM. You have heard about DOM right? It is a model of the HTML document. A tree like model to be specific, standing for Document Object Model. The html tag is the root node with head and body as child nodes and so on. Browser initiates requests every time it finds an external link (images, scripts, links etc). Some requests are blocking which means browser needs to wait for those requests to complete to move to the next line. CSSOM (CSS Object Model) only constructs when the DOM tree is completely built. The DOM contains all the content of the page. The CSSOM contains all the styles of the page; information on how to style that DOM. With the DOM and CSSOM complete, the browser builds the render tree.
The render tree captures both the content and the styles, the DOM and CSSOM trees are combined into the render tree. To construct the render tree, the browser checks every node, starting from root of the DOM tree, and determine which CSS rules are attached.
Once the render tree is built, it's time for building layout. Layout is screen size dependent. It determine where to put which element, what should be the height and width of the element.
The final step is to paint the screen. Once the render tree is created and layout figures out what to put where, it's time to Bob Ross the screen.
And that's it. This is how much work the browser does and that to in seconds. Milliseconds. This is how you are reading this.