title: What is the difference between "Paint" and "Rasterize Paint" in Chrome dev-tools?
body: <p>I've been reading about the critical rendering path in chrome <a href="https://developers.google.com/web/fundamentals/performance/rendering/" rel="nofollow noreferrer">here</a> and <a href="https://developers.google.com/web/updates/2018/09/inside-browser-part3" rel="nofollow noreferrer">here</a>. My understanding from these resources is that the &quot;Compositing&quot; step happens off the main thread, and is dependant on the previous &quot;Paint&quot; step which produces the rasterized layers to be composited together.</p>
  <p>However, when I look at what is happening during a single frame of a position animation in Chrome dev-tools I see this:</p>
  <p><a href="https://i.stack.imgur.com/EAehr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EAehr.png" alt="enter image description here" /></a></p>
  <ol>
  <li>It looks like &quot;Compositing&quot; is happening on the main thread, which is not what I understood from reading these resources.</li>
  <li>There is a paint step on the main thread before compositing, but then there is another &quot;Rasterize Paint&quot; step <em>after</em> compositing on a &quot;Rasterizer Thread&quot;.</li>
  </ol>
  <p>So what is the difference between &quot;Paint&quot; and &quot;Rasterize Paint&quot;, 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?</p>