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.
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.
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.
If anyone could suggest...
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 "task" portion?
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?
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!