title: Understanding Chrome Dev Tools timeline
body: <p>I'm trying to understand why I have several Long Frames reported by Chrome Dev Tools.</p>
  
  <p><a href="https://i.stack.imgur.com/xaMM2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xaMM2.png" alt="enter image description here"></a></p>
  
  <p>The first row (top of the call stack) in the flame chart are mostly <code>Timer Fired</code> events, triggered by <code>jQuery.Deferred()</code>s executing a bunch of <code>$(function(){ });</code> ready funcs.</p>
  
  <p>If I dig into the jQuery source and replace their use of <code>setTimeout</code> with <code>requestAnimationFrame</code> the flame chart doesn't change much, I still get many of the rAFs firing within a single frame (as reported by dev tools) making long frames. I'd have expected doing the below pseudocode:</p>
  
  <pre><code>window.requestAnimationFrame(function() {
      // do stuff
  });
  
  window.requestAnimationFrame(function() {
      // do more stuff
  });
  </code></pre>
  
  <p>to be executed on two difference animation frames. Is this not the case?</p>
  
  <p>All of the JS that is executing is necessary, but what should I do to execute it as "micro tasks" (as hinted at, but not explained here <a href="https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution" rel="nofollow noreferrer">https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution</a>) when <code>setTimeout</code> and <code>rAF</code> don't seem to achieve this.</p>
  
  <p><strong>Update</strong></p>
  
  <p>Here's a zoomed in shot of one of the long frames that doesn't seem to have any reflows (forced or otherwise) in it. Why are all the rAF callbacks here being executed in one frame?</p>
  
  <p><a href="https://i.stack.imgur.com/lIhec.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lIhec.png" alt="enter image description here"></a></p>