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 that we can understand. Our main focus will be on the main section (expanded in the screenshot). Let's zoom into that a bit to take a look at what the events are from left to right.
First, we will see the beforeunload event:
Next, we will see the update layer tree (which we will discuss later):
We now note a Minor GC, which is a browser-specific event (we will discuss this in a later section):
Then, we will note the DOMContentLoaded event followed by the Recalculate Style event, which is when our page is ready to be interacted with:
Pretty cool, right? This syncs exactly with what we have heard about browsers before. They load the page, then DOMContentLoaded gets triggered when everything is ready. However, notice that, there is another event called Minor GC which is being triggered too. We can ignore this, as it is internally handled by the browser and has very little to do with the way our code is structured.
Once the DOM is loaded, we note that we have another event being triggered called Recalculate Style, which is exactly what it sounds like. The DOM is ready, and the browser checks and applies any and all styles that need to be applied to this element. However, you may wonder, we did not add any styles to our template, right? Then, what styles are we talking about? By default, all browsers apply styles to all the elements they render, and these are known as User Agent Stylesheets. The browser still has to add the user agent style sheet styles to the CSSOM.
We still haven't really discussed what Layout is, apart from it being the geometrical structure in which the browser will arrange the elements including, but not limited to, their size, shape, and position on the page. Layout is also an event, which will be recorded by the CDT, to show you how long the browser is spending in trying to rearrange your layout. It is very important that we try to keep the layout event to a minimum. Why? Because Layout is not an isolated event. It is chained by a sequence of other events (such as updating the layer tree and painting the UI), which are required to complete the arrangement of the elements on the UI.
Another important thing to consider is that the Layout event is triggered for all the elements that are effected on the page, that is, even when one deeply nested element is changed, your entire element (or event surrounding elements based on the change) is re-laid out. Let's take a look at an example:
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
border: 1px solid black;
padding: 10px;
}
.child {
height: 20px;
border: 1px solid red;
padding: 5px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
child 1
</div>
<div class="child">
child 2
</div>
<div class="child">
child 3
</div>
<div class="child">
child 4
</div>
</div>
<button onclick="updateHeight();">update height</button>
<script>
function updateHeight() {
var allEl = document.getElementsByTagName('div');
var allElemLength = allEl.length;
for(var i = 0; i < allElemLength; i++) {
allEl[i].style.height = '100px';
}
}
</script>
</body>
</html>
It is pretty straightforward; we have one page with a very small parent consisting of four child elements. We have a button which sets the height of all elements to 100px. Let's now run this page and track the performance when we click on the button update height to change the height of the elements we see the following on the UI:
We can see from preceding screenshot that once the click event starts, it triggers our function, which then sets off a chain of events, including Layout that takes 0.23ms. However, one might wonder, why do we have a Recalculate Style event in between the Function and the Layout? Remember our old friend User Agent Stylesheet? It sets a few styles on the button when it is active, which triggers the Recalculate Style event.
Let's now change the JavaScript function to only change the style of the first child element instead of all the elements on the page and take a look at how that affects the Layout events execution in our case:
function updateHeight() {
var allEl = document.getElementsByTagName('div');
allEl[1].style.height = '100px';
}
Now, when we run the page and profile the execution of the click method, we will see the following in the profiler:
As you can see in the preceding screenshot, it still takes 0.21ms to layout the entire page, which is not very different from our previous value. In our preceding example, we have five more elements. However, in a production application, this can, and will, scale to 1000s of elements, and, for a smooth transition, we want to keep our Layout event under 16ms (60fps).
In all probability, you may not ever come across this issue, but if you do, the simplest way to handle it would be to first check that you are using the latest layout model supported by your browser. In most of the browsers, it would be flexbox or grid, so prefer that over floats, percentages, or positioning.