See the Critical Rendering Path in the browser

Instructor: [00:00] The critical rendering path is the flow of what happens from the moment your JavaScript is running until the moment something changes on screen. The flow works like this.

[00:12] Your JavaScript is running. When it's done, style calculations are being made, then layout calculations, then paint, and eventually, it comes to composite.

[00:30] Now, we'll explain each part. JavaScript doesn't really need much explanation. Style calculation goes over your CSS properties or definitions and applies them to the page.

[00:43] Layout calculates the dimensions and positions of elements in the page. Paint puts the pixels on screen and composite handles complex stuff like z-indexing. If you have elements that are above or below each other, that's where this calculation is being made.

[01:08] How do we see this flow in the browser? Look at this application. This application is a very simple one. What it does, it shows us a button on screen. This bottom when it's clicked, it calls for an add item function that creates a new element of type Dev, set it's in inner text to high and appends it to our operative.

[01:31] If we click here, we'll see the high being added to the screen. Let's see the critical rendering path in this simple case. We go into the performance tool of Chrome DevTools. Click F12 then go to the performance tab, and let's start recording. We start recording. We'll click our item a few times, and then we'll stop.

[01:56] We'll go to full screen, we'll look for it. Let's hit Ctrl+F and look for our function add item. We'll find it here. Let's look for it here and there it is. We'll zoom in to where the function is and then we'll see the critical rendering path. We have the yellow part which is JavaScript.

[02:20] Here is the JavaScript and here's our function. It's all in the yellow part. After the JavaScript finishes, it calculates styles. Then we have the layout calculations. If we go a bit to the right, we have the update layer tree, which follows the layout calculation, in this case, then the paint, and then the composite layers. This is how you see the critical rendering path in the browser.