19

In the Chrome dev tools timeline, what is the difference between the filled, green rectangles (which represent paint operations) and the empty, green rectangles (which apparently also represent something about paint operations...)?

enter image description here

Levi Lindsey
  • 1,049
  • 1
  • 10
  • 17

1 Answers1

60

Painting is really two tasks: draw calls and rasterization.

  • Draw calls. This is a list of things you'd like to draw, and its derived from the CSS applied to your elements. Ultimately there is a list of draw calls not dissimilar to the Canvas element's: moveTo, lineTo, fillRect (though they have slightly different names in Skia, Chrome's painting backend, it's a similar concept.)
  • Rasterization. The process of stepping through those draw calls and filling out actual pixels into buffers that can be uploaded to the GPU for compositing.

So, with that background, here we go:

  • The solid green blocks are the draw calls being recorded by Chrome. These are done on the main thread alongside JavaScript, style calculations, and layout. These draw calls are grouped together as a data structure and passed to the compositor thread.
  • The empty green blocks are the rasterization. These are handled by a worker thread spawned by the compositor.

Essentially, then, both are paint, they just represent different sub-tasks of the overall job. If you're having performance issues (and from the grab you provided you appear to be paint bound), then you may need to examine what properties you're changing via CSS or JavaScript and see if there is a compositor-only way to achieve the same ends. CSS Triggers can probably help here.

Paul Lewis
  • 626
  • 6
  • 5
  • 2
    Paul, great to see you on SO sharing your knowledge! – Luca Dec 11 '14 at 17:20
  • Thank you! This makes a lot of sense. And CSS Triggers is such a good idea. It looks like I should be using transform instead of how I'm currently doing things. So not only have you answered my question, but you just hugely increased the performance of my site! – Levi Lindsey Dec 11 '14 at 17:53
  • \o/ Glad to have helped. @Luca, I'd be happy to try and answer other questions, just point me at them :) – Paul Lewis Dec 11 '14 at 17:54
  • @PaulLewis have you split the existing green paint rect into 2 rects or is the new rasterization rect a demystification of the white (idle) rectangle? – basecode Dec 12 '14 at 07:45
  • 3
    @basecode The architecture of Chrome has changed. It used to be that draw calls were immediately followed by rasterization on the main thread, and it's only in the past little while that's become two distinct tasks. Independently of that we've been instrumenting more areas of Chrome, so it's a bit of both I guess! – Paul Lewis Dec 12 '14 at 10:59