What can cause requestAnimationFrame to drop frames in an efficient webgl loop?

Question

I programmed a javascript demo / test to learn WebGL. I have a pretty efficient game loop structure that (according to Chrome Dev Tools) only takes 1-2 milliseconds to run. I use requestAnimationFrame to schedule a loop (because this is apparently the “right” way to do 60 frames per second animation). When I look at the timeline for constructing a frame, the actual javascript code is minimal, but the "unoccupied" part of the frame can greatly shift the frame along the 30 fps line. The FPS counter shows 20-40 frames per second with a lot of drops (almost like a saw blade).

Is there anything else I can explain if my render cycle is already 1-2 ms when it has to fit in 16 ms to run 60 frames per second?

If I convert a loop to a setTimeout loop, it may contain 60 frames per second. I can even do this in Retina Resolution mode without affecting 60 frames per second.

eg.

    // Timeout version
    function gameLoop()
{
setTimeout(gameLoop, 1000/60);
//Process movement, AI, game logic
 renderLoop();
}
function renderLoop()
{
//Drawing all of the 3d stuff
}

vs

function gameLoop()
{
requestAnimationFrame(gameLoop);
//Process movement, AI, game logic
renderLoop()
}
Function renderLoop()
{
//draw objects
}

At some point, I also used gameLoop "separately" in setTimeout, and renderLoop was called using requestAnimationFrame. Since they are all in the same branch, this seems a little suspicious, as they may tread on each other.

Answer 1

requestAnimationFrame , .

, 60 , , ( ).

setTimeout, , 60 , 30 . - gpu ( ).

( ). ( ..) -.
, 30 , fps.