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