A Web Page Journey – A Mind Map !

Ever wonder what happens when you hit enter after typing the url in the address bar of the browser? I

Oh I wish!😨
Browser BTS does a lot to make it look so smooth. And understanding them is very important to make our applications highly performant.

you got this

Let us understand them one by one-

  1. you enter some input you-enter-your-fav-website

  2. The browser parses the input to check whether it is a URL or a search query.
    For search query => it redirects to search engine.

  3. For URL, this –
    In n/w response, we can see huge difference between 14kb and 15kbs response size, but not between 15 and 16kbs. Knowing that all Kbs are more important than others, you can get a huge advantage of TTFB. More details here.

  4. Once the response is received, it is –

  5. Once the renderer process has received the IPC and data stream, it will –

    • Begins parsing the received HTML. The received HTML is in bytes format.
      HTML parsing
    • DOM (data structure browsers use to process HTML into web pages) – This includes all the nodes of HTML and their relationships.

    • When the parser comes across downloading resources (such as CSS, JS, fonts, assets like image, video), it sends the request to the network thread in the browser process.
    • Preload Scanner is a browser optimization technology to speed up this process. It gets to the token generated by the parser and sends the request to the network thread in the browser process.
    • CSS, JS are rendering blocked resources. They block HTML parsing and block page rendering, thus creating more delays and worsening page load times.
    • This is why we use techniques like preloads, preconnects, async, diff, split css into critical and non critical and avoid non critical etc wherever appropriate
  6. After the DOM is constructed, the main thread parses the CSS to create CSS – a data structure similar to the DOM, but containing the computed styles for each node in the DOM.

  7. Now the browser creates an accessibility tree – AOM – the semantic version of the DOM – that will be used by screen readers and other accessibility devices.
    accessibility object model

  8. In order to start rendering the page, the browser needs to know the exact position of the nodes. Therefore, it creates a render/layout tree, which contains coordinate information for the nodes to be shown on the page, considering all line breaks, heights and widths of the elements.
    render tree
    Why do we need it if we have dom and csosome?
    Because CSS is powerful it can hide elements from web pages, even if they are present in the DOM. Conversely, it can add information (using pseudo-classes), even if they are not present in the DOM. It can float elements aside, mask overflow objects, and change writing direction.

    • The subsequent calculation of these positions is called reflow.
    • If for elements like image, we can provide dimensions before loading, then reflow can be saved by improving CLS.
  9. It then creates the paint record – to add the z-index and to determine the order in which to paint.

  10. Now comes the stage where we actually see something on the screen – raster – to convert images created using the GPU into actual pixels.
    To optimize this, the browser creates layers of the page (video, canvas, 3D transform, will-change based on CSS property). These layers are individually rasterized and then combined to form the actual page.
    Rasterization and Structure

    • This marks the first occurrence of FCP.
    • Also, the entire period from when the DNS lookup starts, marks our TTI.
    • We should check for reflow and repaint when we encounter live scrolls and animations, it may be skipping a few frames.
  11. It is now that the renderer process sends a message back to the browser process to replace the spinner with a reload icon. And all onload events are fired.

Web page visits are thus eventful and expensive.

Leave a Comment