Understanding The Critical Rendering Path in 5 Minutes
What it takes for a browser to render everything into place
Ever wondered what is actually going behind the scenes when your browser displays a website for you? What it actually takes to render everything you see here? The image above, the words you’re reading? — If so, you are in the right place. This article is going to walk you through the path of the critical rendering or CRP for short.
To understand the process, first, we need to understand the meaning, and what better way to do that than to clarify the definition.
The Critical Rendering Path
The Critical Rendering Path is the sequence of steps the browser takes between receiving resources such as HTML, CSS, and JavaScript to turn them into pixels you see on your screen right now.
It consists of five different steps, each building on top of the preceding one. Starting from building the dom once the browser receives the HTML file from the server.
#1: Constructing the Document Object Model (DOM)
After receiving the HTML file, the browser needs to parse it to construct the dom, which serves as a programming API. Any further operation is done using the DOM…
