This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

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? 🤔

what-happens-visually-on-hitting-enter

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.

You got this

Let’s perceive these one after the other –

  1. You enter some enter You-entering-your-fav-website

  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 –
    What-does-browser-do-when-it-encounters-a-url
    💡 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 –
    what-does-browser-do-after-the-response-is-fetched

  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.
      HTML Parsing
    • 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.
    CSSOM

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

  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.
    Render tree
    🤔 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.
    Rasterization and Composition

    • 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.

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?