Journey of a web page – A mind map !

Ever questioned what occurs if you hit enter after typing a url within the browser’s deal with bar? 🤔

Oh, I want!😨
The browser BTS does so many issues for this to seem so seamless. And understanding these are crucial to make our purposes extremely performant.

Let’s perceive these one after the other –

1. You enter some enter

2. Browser parses the enter to verify if its a url or a search question.
   For search question => it redirects to the search engine.

3. For URL, it –
   
   💡 Within the n/w response, we are able to see huge variations between 14kb and 15kbs response dimension, however not between 15 and 16 kbs. Understanding which all Kbs are extra vital than others can provide you a giant time TTFB profit. Extra particulars here.

4. As soon as the response is fetched, it –
   

5. As soon as renderer course of receives the IPC and information stream, it –

   • Begins parsing the HTML acquired. HTML acquired is in bytes format.
     
   • DOM (the info construction browsers use to course of html into net pages) – it incorporates all of the nodes of HTML and their relationships.
   • When parser comes throughout downloading assets(like css, js, belongings like fonts, picture, video), it sends requests to the community thread within the browser course of.
   • Preload scanner is a browser optimisation method to speeden up this course of. It peaks on the tokens generated by parsers and sends requests to the community thread within the browser course of.
   • CSS, JS are render blocking assets. They cease html parsing and block web page rendering, thus creating extra delays and worsening the web page load instances.
   • 💡 For this reason we use methods like preloads, preconnects, async, defer, break up CSS into vital and non vital and defer the non vital one and many others wherever appropriate

6. As soon as the DOM is constructed, the primary thread parses the CSS to create CSSOM – the info construction just like DOM, however containing the computed types for every node within the DOM.
   

7. Now the browser creates an accessibility tree – AOM – semantic model of DOM – for use by display screen readers and different accessibility gadgets.
   

8. To start out rendering the web page, the browser must know the precise positions of the nodes. So, it creates the render/format tree, containing the coordinates info for the nodes that are to be proven on the web page, contemplating all line breaks, peak and width of parts.
   
   🤔 Why do we want it if we’ve dom and cssom?
   As a result of CSS is mighty 💪🏻 It will possibly conceal parts from the online web page even when they’re current in DOM. Vice versa, it may possibly add information(utilizing the pseudo lessons), even when they aren’t current in DOM. It will possibly make the weather float to at least one aspect, masks overflow gadgets, and alter writing instructions.

   • Subsequent calculation of those positions is known as reflow.
   • 💡 If for parts like picture, we are able to present dimensions earlier than loading, reflow will be saved enhancing the CLS.

9. Subsequent it creates paint information – so as to add z-index and decide orders through which to color.

10. Now comes the step the place we really see one thing on the display screen – rasterization – remodeling the photographs created into precise pixels utilizing GPUs.
    To optimise this, the browser creates layers of the web page (based mostly on video, canvas, 3d remodel, will-change css property). These layers are individually rasterized after which composited to type the precise web page.
    

    • The primary incidence of this marks the FCP.
    • Additionally, all the time length from when the DNS lookup began to right here, marks our TTI.
    • 💡 After we encounter janky scrolls and animations, we must always verify reflows and repaints, it have to be skipping some frames.

11. It’s now that the renderer course of sends a message again to the browser course of to interchange the spinner with reload icon. And all onload occasions are fired.

That is how eventful and costly an online web page’s journey is.