The Render Tree – Website Performance Optimization
Articles,  Blog

The Render Tree – Website Performance Optimization

[BLANK_AUDIO] Okay. So, the DOM contains all the content of the page. The CSSOM contains all the styles of the page. So how do we take the content and styles and turn them onto pixels on the screen? I feel like we’re missing an intermediate step.>>That’s good intuition. Now we need to combine the DOM and the CSSOM trees into the render tree which will capture exactly what you described. One of the most important properties of the render tree is that it only captures visible content. And to see this in action, let’s work through the simple example we have in front of us. At the top, we have the DOM tree and at the bottom the CSSOM object model. To construct the render tree, we start at the root of the DOM tree, which in this case is the paragraph node and check if there is any CSS rules. That match it. In this case, we see that we do have a matching rule that makes all the text render in 16 pixel font size and in bold. So we copy the paragraph node to our render tree alongside with its CSS properties. Okay. We’re done with the paragraph node. Let’s walk down the tree. Next, we see, hello, which is just a text node. So we copy that through our render tree. Next we arrive at the span node. We have a matching CSS rule for it. We have a span and it is indeed a child of the paragraph node. But notice that one of the properties in this rule is that it’s marked as display none, which tells us that the contents of this span should not be rendered. And since as we said the render tree only captures visible content. We can skip it and its children.>>We skip the children, because display,none cascades down, right?>>Exactly. And as a result, we can skip all the children nodes of the span node and go to the next node, which in this case is just another text node. And we copy that to our render tree once over.>>So the render tree captures both the content and the styles.>>Right. Now let’s take a look at our Hello World page. Okay, here we have the dom and CSS trees for our Hello World page. To build a render tree we start at the HTML node in the dom tree. The HTML and the head sections don’t contain any visible information. So we can just quickly prune them out of our render tree. Next, we have the body node. Let’s copy that over. This left part of the tree should look familiar. This is what we just built. So let’s copy that over as well. Finally, we have the div and the image nodes. Both of these contain visible content, so we also copy them over, and their styles, into our render tree. With that done, compare this render tree to what we have on the screen.>>Huh. Yeah. The render tree is a pretty good representation. The unnecessary text is gone. I can see that there should be an image on the screen and it should be displayed on the right. So, are we all done now?>>Not quite. We still have to do layout. But first a quick quiz.


Leave a Reply

Your email address will not be published. Required fields are marked *