🎁

12 Days of Baddass Courses sale! Get instant access to the entire egghead library of courses and lessons for 58% off.

Runs out in:
15 : 06 : 10 : 50
Join egghead, unlock knowledge.

Want more egghead? It's 58% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 40% Off
1×
Become a member
to unlock all features
Autoplay

    See the Critical Rendering Path in the browser

    Yonatan KraYonatan Kra
    chrome-devtoolsChrome DevTools
    htmlHTML 5
    javascriptJavaScript

    The Critical Rendering Path is what happens from the moment your javascript is running to the moment something changes on screen. In this lesson, we will see how to monitor and view the critical rendering path in the browser.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

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

    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.

    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.

    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.

    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.

    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.

    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.