The Compositor Thread

[00:00:00]
>> Steve Kinney: So let's talk about that, talk about this thing called the compositor thread. An oversimplification is to say that a browser has three threads. That's not really true anymore, some browsers have all sorts of other like special threads. But let's oversimplify for a second and say that there's three.

[00:00:18]
The UI thread is none of our business. The UI thread, you're like, I write UIs. This is more Chrome's UI. This is like the tab bar and the location bar and all of that kind of stuff. That is Chrome itself. You don't touch that. You don't have access to it.

[00:00:32]
That exists. The renderer thread is where we live most of the time. That's where our Javascript runs, that's where our painting happens, that's where layout thrashing happens, right? All of the fun stuff that we do in there. That's where all the HTML gets parsed sometimess and stuff along those like there.

[00:00:49]
Every tab in Chrome or Firefox, Safari has one of these threads. It used to be that they all shared one, which meant one webpage would take down all the tabs, now, one webpage can only take down its own tab. We live in better times. So there's one of these per page, and it's where all of our JavaScript runs.

[00:01:07]
Everything we're doing, almost everything happens there. Then we have this other thing called the compositor thread. Its sole job is to draw bitmaps, take the bitmaps, send them to GPU, put them on the screen. So remember, painting makes a bunch of bitmaps. The compositor's job is to take those and toss them onto the screen, so we hand them over, we'll talk a little bit about it in a second.

[00:01:31]
So when we paint, we create the bitmaps. After painting, the bitmaps are shared with the compositor thread, there is a line of shared memory space that uses some OpenGL. I am now getting hand wavy, but it's fine hand wavy. Before, it was unacceptable hand wavy. This is acceptable hand wavy cuz it's OpenGL.

[00:01:45]
Cool, so the main thread is CPU intensive, right? You saw me peg the CPU at multiple times today, right? When we block it, nothing happens. The compositor thread is GPU intensive, right? There's, like, a hidden part here of everything that we can take away from that main renderer thread and pass it over to the GPU thread.

[00:02:06]
Like the main thread has, the renderer thread, has way more responsibilities. It's got to parse everything, calculate styles, paint, layout, JavaScript. Anything that we can offload to this other thread that's like doing GPU stuff, right, we should go ahead and do that. So, yeah, there's a lot of stuff responsible for.

[00:02:25]
So anything we can say, hey, GPU handle this. It's going to make us faster. So how do we do that? We're managing layers. I'll get to what that is in a second. Painting is super expensive, we should avoid it.