小编Mic*_*ard的帖子

我一直在编写一个javascript演示/测试来学习WebGL.我有一个相当有效的游戏循环结构(根据Chrome Dev Tools)只需1-2毫秒就可以运行.我正在使用requestAnimationFrame来安排循环的运行(因为这显然是执行60fps动画的"正确"方式).当我查看构造框架的时间轴时,实际的javascript代码是最小的,但框架的"空闲"部分可以将框架推到30 fps线以上.FPS计数器显示20-40fps,有很多滴(几乎像锯齿).

如果我的渲染循环已经是1-2毫秒,当它必须适合16毫秒运行60fps时,还有什么我可以解释的吗？

如果我将循环转换为setTimeout循环,它可以轻松容纳60fps.我甚至可以在Retina Resolution中渲染它而不会影响60fps.

例如

    // 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
}

我还在某个时候让gameLoop在setTimeout上"单独"运行,而renderLoop被requestAnimationFrame调用.因为它们都在同一个线程上,所以这看起来有点躲闪,因为它们可以踩到彼此的脚趾.