Q2: Rendering Pipeline & Compositing

[00:00:00]
>> Question number two, which statements are true? A, the render tree contains all the elements from the DOM and CSSOM combined. B, compositing is the process of separating layers based on z-index, which are then combined to form the final image displayed on the screen. C is the layout process assigns colors and images to the visual elements in the reder tree.

[00:00:25]
D, the compositing process happens on the compositor thread, or E, elements that aren't visible on the page. So for example with display hidden, are not part of the dom tree. Let's go to the answer. So the only right answer here is D. The compositing process happens on the compositor thread.

[00:00:47]
So this question is all about the rendering pipeline. Because before the browser is able to render anything, it has to first parse the HTML and generate a DOM tree, which represents the static markup as a tree data structure. And it does the same for the CSS, but that one representing the styles and rules apply to every elements.

[00:01:10]
And after doing it, kind of combines both trees, and it only includes like the visual elements the elements that will actually see on the screen into a render tree, and this tree contains both the styles as well as the HTML. It doesn't include, again, any elements that aren't visible, not the head elements or anything with display hidden.

[00:01:31]
This is just what will eventually get rendered. Based on this tree, the next phase happens which is the layout process. So in that case, it calculates the position, the size, and the geometry of every element that will eventually render on the screen. And it also takes into account like viewport element dimensions all those things.

[00:01:53]
Then the next phase is the painting phase, right, when it actually creates a visual representation of a DOM tree on the screen so it's actually when it starts to render those pixels, yeah, the entire rasterization process happens during this paints method. And this also takes into consideration the screen resolution, everything that can be painted on the screen.

[00:02:16]
Now after paints is the compositing phase. Because as the browser is painting it, it's actually doing it on a separate layer sometimes depending on the styles you're using, we'll talk about that in another question as well. But then at the very end, it actually merges all those layouts together into one final bitmap, one final image that eventually gets rendered on the screen.

[00:02:39]
So when we go back to those statements, the render tree contains all the elements from the DOM and the CSSOM combined. That's Not true. It's not all the elements, it's only the visual elements. So the head elements as I said, the display hidden, they won't be included in the render tree.

[00:02:56]
>> Is the combination of DOM and CSSOM called the render tree? Then
>> Yeah, that's the render tree. Sorry if I didn't mention that. It's called the render tree. Yeah. And then those are kind of special nodes. And all of these nodes have internal methods that eventually the drawer in Chromium, Skia can use to invoke that, and then it'll actually paint something on the screen.

[00:03:18]
But then be like compositing is a process of separating layers based on z-index, which are then combined to form the final image. That's not true. Compositing is just a process of combining those layers together. And the z-index plays a role in kind of the stacking order of these layers, but it's not separating anything based on it itself.

[00:03:38]
And then the layout process assigns colors and images to the visual elements in the render tree. It's not the layout process, it's a paint process. And the E falls elements that aren't visible, for example display hidden, aren't part of DOM tree. They are part of the DOM tree, just not the render tree.

[00:03:55]
So the compositing process happens on the compositor thread. And this is like a separate thread in your GPU that your browser uses to kind of offload that pretty expensive compositing process. So it doesn't all happen on your own device. This is much faster, allows for much smoother animations, all the good stuff.