Journey of a web page - A mind map !

Abhighyaa Jain — Sun, 06 Nov 2022 07:33:38 +0000

Ever wondered what happens when you hit enter after typing a url in the browser’s address bar? 🤔

Oh, I wish!😨
The browser BTS does so many things for this to appear so seamless. And understanding those are very important to make our applications highly performant.

Let's understand these one by one -

You enter some input
Browser parses the input to check if its a url or a search query.
For search query => it redirects to the search engine.
For URL, it -

💡 In the n/w response, we can see vast differences between 14kb and 15kbs response size, but not between 15 and 16 kbs. Knowing which all Kbs are more critical than others can give you a big time TTFB benefit. More details here.
Once the response is fetched, it -
Once renderer process receives the IPC and data stream, it -
- Starts parsing the HTML received. HTML received is in bytes format.
- DOM (the data structure browsers use to process html into web pages) - it contains all the nodes of HTML and their relationships.
- When parser comes across downloading resources(like css, js, assets like fonts, image, video), it sends requests to the network thread in the browser process.
- Preload scanner is a browser optimisation technique to speeden up this process. It peaks at the tokens generated by parsers and sends requests to the network thread in the browser process.
- CSS, JS are render blocking resources. They stop html parsing and block page rendering, thus creating more delays and worsening the page load times.
- 💡 This is why we use techniques like preloads, preconnects, async, defer, splitting CSS into critical and non critical and defer the non critical one etc wherever suitable.
Once the DOM is constructed, the main thread parses the CSS to create CSSOM - the data structure similar to DOM, but containing the computed styles for each node in the DOM.
Now the browser creates an accessibility tree - AOM - semantic version of DOM - to be used by screen readers and other accessibility devices.
Now to render the page, the browser needs to know the exact positions of the nodes. So, it creates the render/layout tree, containing the coordinates information for the nodes which are to be shown on the page, considering all line breaks, height and width of elements.

🤔 Why do we need it, if we have dom and cssom?
Because CSS is mighty 💪🏻 It can hide elements from the web page even if they are present in DOM. Vice versa, it can add info(using the pseudo classes), even if they are not present in DOM. It can make the elements float to one side, mask overflow items, and change writing directions.
- Subsequent calculation of these positions is called reflow.
- 💡 If for elements like image, we can provide dimensions before loading, reflow can be saved improving the CLS.
Next it creates paint records - to add z-index and determine orders in which to paint.
Now comes the step where we actually see something on the screen - rasterization - transforming the images created into actual pixels using GPUs.
To optimise this, the browser creates layers of the page (based on video, canvas, 3d transform, will-change css property). These layers are individually rasterized and then composited to form the actual page.
- The first occurrence of this marks the FCP.
- Also, the entire time duration from when the DNS lookup started to here, marks our TTI.
- 💡 When we encounter janky scrolls and animations, we should check reflows and repaints, it must be skipping some frames.
It is now that the renderer process sends a message back to the browser process to replace the spinner with reload icon. And all onload events are fired.

This is how eventful and expensive a web page’s journey is. So, be mindful of the renders next time you code an application.

My first conference!

Abhighyaa Jain — Tue, 11 Oct 2022 17:47:20 +0000

So, React India conf ended a couple of weeks ago as I write this, but what I experienced is to be cherished forever. I am still overwhelmed, hoping that writing about it makes me sober 😛

Also, if you have not watched the Hotstar special at React India, check it out here

and DO NOT, I repeat DO NOT miss out on the entry if you are a true bollywood fan 🙈

So this all began with me asking my EM, “I want to attend the conference. Can you help me with the passes?” To this, he casually replied, “Give a talk there, easy peasy”. I was wondering - Give a talk. Me. At an international tech conference. Easy Peasy. Okay he must be definitely kidding. A little disclaimer about me here, I have been around amazing folks since the beginning of my career and I don’t know lots of things so I was muddled whether I would be able to present something that would make sense and am I the right person to do so, because I am a very tiny contributor to what we are gonna talk about.

But with this blog and the video, you must have figured it out that I made it to the conf. So, cutting short these dilemmas to the conf week, I and my colleagues had already outlined the content we wanted to present by now, we had worked on the slides as well. Ours was the last day, last talk and we(I and my co speaker) were arriving a day before the conf, which meant we had sufficient time to practise, coordinate, and do dry runs. Right?
Oh, I wish. This was a myth. The moment I stepped in Goa, I started meeting folks from the airport itself, and the talks continued to happen - at the venue in the day, in the night, in the conference hall, in the workshops, in the garden, on the beach, in the lobby area, on the booths, during the meals, off the breaks - Basically it just went on. And it was only until two hours before the talk we realised, ouch, we need to be at least somewhat prepared. And with 1.5 dry runs and lots of esteem, we did it.

Key Takeaways -

Of course lots of goodies 😛

Lots of things to flaunt about - meeting and spending time with tech celebrities 🙈

But majorly -

Give things a shot - Do not be hesitant to ask for what you want even in professional settings (life in general as well) You are either way not getting it, but you might get it, if you ask for it. I from sharing the interest of attending the conf, to actually speaking at it - classic example here!
You don’t need to know it all to be an awesome techie. You just need to know how to figure things out. Ask the right questions to you and folks around and chase for the answers.
Go, talk to folks around. You get some useful insights and ideas about where you have been moving in circles.
It can be an eye-opener, a turning point for you as you get highly pumped to contribute to the community.(by any means - open source, blogs, podcasts, videos, tweets - me beginning with writing this)
Be humble. Dance your way to celebrating tech and life in general. Enjoy every bit of your journey.

DEV Community: Abhighyaa Jain

Journey of a web page - A mind map !

My first conference!

Key Takeaways -