Reflow

[00:00:00]
>> Eric: Okay, so the next topic is a reflow. So what is the reflow? When you read your HTML and CSS, so the browser compiles two trees. One is the DOM, which is basically the object representation of your HTML. And the second one is CSSOM, which is the tree of all CSS rules that apply to some HTML elements.

[00:00:28]
And the final render tree is built using both of these trees. So basically merging that. Then there is a process called reflow. The reflow happens when some Javascript tries to modify the DOM tree or the styles. So for instance, it could be, you have the load more button and then you render more cards on your list.

[00:00:51]
Or it's also could be when you're rendering your React app, so you first load your index HTML. Then you provide the container where React should work and do the modification to the DOM via DOM API. So the reflow process is multi-step pipeline. First, it's usually kicked off by JavaScript then when we apply the DOM modification, the browser needs to recalculate the DOM and CSSOM sub tree.

[00:01:23]
So that reminds, it compiles all your style selectors then rebuilds the DOM and CSSOM tree. Then once it's ready, the browser needs to recalculate the positions and the HTML properties. So it's a layout phase. So and the style and layout phase are very CPU bound. This means that if we trigger reflow too much, we can block the render thread.

[00:01:51]
Once everything is ready, and now we need to draw the bitmap on the screen, the GPU is used, which is the paint phase. So the paint phase is basically drawing the pixels on your monitor. So it involves the GPU and it's separated from the CPU. So this means that it doesn't block the rendering thread and it's pretty fast because GPU is very good at drawing pixels on the screen.

[00:02:18]
And then there is a composite phase. The composite phase is the last phase, when you have multiple layers on your screen. So the composite phase, just arrange them in the right order to make sure that everything is displayed correctly. And to prove that, we can optimize this pipeline.

[00:02:38]
Actually, first, let's look at the example of the reflow. So this is the Wikipedia page that we can use. And as you can see, this is how the browser renders the page into a reflow. So first, it goes from top to bottom. And then you will see that there are some styles loaded, and the browser needs to do the full reflow for the page.

[00:02:59]
You see we again go from top to bottom just adjusting the styles on the elements.
>> Eric: So let's have a quick example of the non-optimized pipeline where we utilize the style layout, paint and composite face and optimize pipeline. So we need to open the codes inbox example. So right now we're rendering 2,000 rectangles on the screen, and the idea is, right now the page is using optimized pipeline.

[00:03:33]
So we mostly utilize the GPU. And as you can see, there is no lag on the screen. So we are getting our 60fps and we can measure the performance by going to the performance tab. And now we can try to see how much CPU is loaded. So we can run the quick snapshot and that should be enough.

[00:03:56]
So if we look at the CPU here, so we utilize 0% of CPU, so basically, it's a flat line. But we can switch this to the non-optimized pipeline. So let's try to run the snapshot now. And you see the buffer is filled in in three seconds.
>> Eric: See now the CPU is loaded.

[00:04:30]
And the thing is, this Mac is 16 cores, but you don't have the 16 cores M.2 Macs on every device. And if we throttle the CPU here, you will see that CPU will work hard just to move these 2,000 rectangles. The difference in the pipeline sometimes and the code difference is very small.

[00:04:51]
So if we look how everything is built, is just two lines. If we apply the margin-top property in animation, then what the browser does, it needs to recalculate the position of every element, like of all 2,000 rectangles, to render the frame. While we apply the translateY function, it only moves the pixels.

[00:05:16]
It used only the GPU just to draw a new pixel set because the CSS transformation, they do not utilize CPU.