title: What is the significance of rasterize paint extending over multiple frames
body: <p>I have started looking into the client side performance of my app using Chrome's Timeline tools. However, whilst I have found many articles on how to use them, information on how to interpret the results is more sparse and often vague.</p>
  
  <p>Currently I am looking at scroll performance and attempting to hit 60FPS.</p>
  
  <p>This screenshot show's the results of my most recent timeline recording.
  As can be seen most frames are over 60 FPS and several are over 30 FPS.</p>
  
  <p><a href="https://i.stack.imgur.com/ksrj3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ksrj3.png" alt="enter image description here"></a></p>
  
  <p>If I zoom in on one particular frame - the one with duration 67.076ms I can see a few things:</p>
  
  <ol>
  <li>the duration of the frame is 67ms, but aggregated time is 204ms</li>
  <li>201ms of this time is spent painting BUT the two paint events in
  this frame are of duration 1.327 ms and 0.106 ms </li>
  <li>The total duration for the JS event, update layer tree and paint events is
  only 2.4 ms </li>
  <li>There is a long green hollow bar (rasterize Paint)
  which lasts the duration of the frame and in fact starts before and
  continues after it.</li>
  </ol>
  
  <p>I have a few questions on this:</p>
  
  <ol>
  <li>the aggregated time is far longer than the frame time - is it
  correct to assume that these are parrallel processes?</li>
  <li>the paint time for the frame (204ms) far exceeds the time for the two paint events (1.433ms) - is this because it includes the
  rasterize paint events</li>
  <li>why does the rasterize paint event span multiple frames?</li>
  <li>where would one start optimizing this?</li>
  <li>Finally can someone point me to some good resources on understanding this?</li>
  </ol>