O'Reilly logo

Hands-On Data Structures and Algorithms with JavaScript by Kashyap Mukkamala

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The HTML layout 

Let's start with an extremely simple web page and take a look at how chrome handles rendering this page:

<!DOCTYPE html><html>    <head></head>    <body>        <div>test</div>    </body></html>

Once we load the page, we will use Chrome Developer tools (DevTools) to generate the performance snapshot of this templates load. To do so, navigate to the CDT on your Chrome browser (Settings -> More tools -> Developer tools).

Once we are there, let's record a new snapshot by clicking on the record button on the top-left corner of the panel that just opened. Once your page loads, stop the recording and let the snapshot load in the panel. The result of that would look as follows:

Incomprehensible, right? Well, let's break this down into small pieces ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required