title: Interpreting Dropped Frame In Chrome Dev Tools
body: <p>I am looking for information on how to interpret the Chrome Dev Tools when it shows a dropped frame. The official docs don't seem to cover this or the Udacity course about request animation frames.</p>
  <p>I have a webGL project (using Three.js) and I see the following in chrome dev tools when I'm animating - I am using requestAnimationFrame.</p>
  <p>To be clear, I AM NOT asking how to fix my code, or what is wrong with my code. I am asking for help understanding what this is telling me, the code is irrelevant.</p>
  <p>If anyone could suggest...</p>
  <p><a href="https://i.stack.imgur.com/lx9R8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lx9R8.png" alt="enter image description here" /></a></p>
  <ol>
  <li><p>From the above screenshot you can see that it's taking 15.7ms but warning there's a dropped frame. If I click on the task it seems to take 12ms, so wheres the additional 3.7 ms coming from? How can I find out, since my functions are all covered in the &quot;task&quot; portion?</p>
  </li>
  <li><p>Is the green 1.0ms that is seen before the ref 15.7ms a frame? - Does that mean I'm firing a requestAnimationFrame but doing nothing? Since nothing is shown in the dev tools, how can I find out what is firing it?</p>
  </li>
  </ol>
  <p>EDIT. Here's a more extreme example I can get, as you can see its the same sort of thing though, my task actually took 9ms, but it says the frame was 82ms!</p>
  <p><a href="https://i.stack.imgur.com/WHzmT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WHzmT.png" alt="enter image description here" /></a></p>