What is the difference between "Paint" and "Rasterize Paint" in Chrome dev-tools?

Question

I've been reading about the critical rendering path in chrome here and here. My understanding from these resources is that the "Compositing" step happens off the main thread, and is dependant on the previous "Paint" step which produces the rasterized layers to be composited together.

However, when I look at what is happening during a single frame of a position animation in Chrome dev-tools I see this:

1. It looks like "Compositing" is happening on the main thread, which is not what I understood from reading these resources.
2. There is a paint step on the main thread before compositing, but then there is another "Rasterize Paint" step after compositing on a "Rasterizer Thread".

So what is the difference between "Paint" and "Rasterize Paint", and why does the rasterize paint step happen after compositing is already complete? And why does compositing appear to happen on the main thread in chrome dev-tools but the docs describe it as happening on a different thread?

Answer 1

According to this article :

you may hear the term "rasterize" used in conjunction with paint. This is because painting is actually two tasks: 1) creating a list of draw calls, and 2) filling in the pixels.
The latter is called "rasterization" and so whenever you see paint records in DevTools, you should think of it as including rasterization. (In some architectures creating the list of draw calls and rasterizing are done in different threads, but that isn't something under developer control.)

Rasterization is also the action of converting a vectorial image into a pixel matrix.