How Browsers Turn Web Requests Into Pixels on Your Screen

This story was originally published on HackerNoon at: https://hackernoon.com/how-browsers-turn-web-requests-into-pixels-on-your-screen.
A deep dive into how browsers render web pages—from DNS and HTML parsing to layout, painting, and GPU compositing.
Check more stories related to programming at: https://hackernoon.com/c/programming. You can also check exclusive content about #web-performance-optimization, #critical-rendering-path-crp, #browser-rendering-pipeline, #dom-and-cssom, #layout-paint-compositing, #gpu-acceleration-web, #css-performance, and more.

This story was written by: @raju01. Learn more about this writer by checking @raju01's about page, and for more stories, please visit hackernoon.com.

What the web browsers do when a user requests a page is quite a remarkable journey. My goodness, the process behind the curtains reflects such a diligent effort by the folks who work on browsers. So far, I find it very interesting to navigate through the steps that have been taken to draw pixels on the screen. I’ll admit it, this is a surprisingly deep and interesting area. As developers, we sustained the focus quite a bit on performance, especially when building things on scale. If we want to have a strong hold on the rendering performance metrics of browsers and on improving bottlenecks, I feel we’d better keep on detouring on this route to better off ourselves with the right combination of knowledge, experience, and tooling. Otherwise, taking a long time to load a fully interactive page as well as responding to user interactions can ruin a good user experience. After all, the only thing that matters, and we’ll ever need in software, is the good user experience.