requestAnimationFrame 不流畅

Question

我正在编写一些 WebGL 动画，但无法使 requestAnimationFrame 流畅地工作。我写这个空循环是为了在不同的浏览器中测试它：

<html>
    <body>
        <script type="text/javascript">

            var prev = Date.now();

            function frame()
            {
                window.requestAnimationFrame(frame);

                var now = Date.now();
                var diff = now - prev;
                prev = now;

                if(diff > 20)
                {
                    console.log(new Date().toLocaleTimeString() + ": " + diff);
                }
            }

            frame();

        </script>
    </body>
</html>

它计算帧之间传递的时间，如果超过 20 毫秒，则将其记录到控制台。我的设置是：Windows 7 x64、Intel i7、Sapphire Tri-X R9 290、16 GB RAM。显示频率为 60 Hz，因此我希望看到帧之间有 1 / 60 = 16.666(6) ms 的间隔。所以我设置了 20 毫秒的阈值来防止控制台泛滥。后台什么都没有发生，一切都是闲置的。没有打开其他浏览器选项卡。这是我的号码：

Google Chrome:

7:47:13 AM: 53
7:47:16 AM: 53
7:47:19 AM: 53
7:47:22 AM: 53
7:47:25 AM: 54
7:47:28 AM: 53
7:47:31 AM: 53
7:47:34 AM: 53
7:47:37 AM: 54
7:47:40 AM: 54
7:47:43 AM: 54
7:47:46 AM: 54
7:47:49 AM: 55
7:47:52 AM: 54
7:47:55 AM: 54

您可以清楚地看到模式：每 3 秒 53-55 毫秒的差距。好的，换个浏览器试试：

FireFox:

7:49:25: 53
7:49:25: 89
7:49:26: 88
7:49:28: 51
7:49:28: 42
7:49:28: 105
7:49:28: 52
7:49:28: 21
7:49:28: 29
7:49:34: 23
7:49:34: 22
7:49:38: 27
7:49:39: 55
7:49:39: 51
7:49:39: 108
7:49:45: 35
7:49:45: 43
7:49:45: 24
7:49:45: 103
7:50:09: 45
7:50:18: 22
7:50:19: 31
7:50:25: 59
7:50:25: 33
7:50:25: 21

更糟！好的，让我们继续。 Opera 内部有与 Chrome 相同的引擎，但令人惊讶的是它显示出几乎完美的计时，所以我将阈值降低到大于 17 毫秒：

Opera:

7:56:57 AM: 18
7:57:00 AM: 18
7:57:12 AM: 18
7:57:13 AM: 18
7:57:17 AM: 18
7:57:19 AM: 18
7:57:32 AM: 18
7:57:33 AM: 18
7:57:34 AM: 18
7:57:37 AM: 18
7:57:48 AM: 18
7:57:50 AM: 18
7:57:51 AM: 18
7:57:54 AM: 18
7:57:55 AM: 18

有趣的是，在您不触摸键盘和鼠标之前，它几乎可以完美运行。如果您移动鼠标光标，那么它可以写入这条 18 毫秒的消息。而最大的惊喜 - IE11。在页面刷新后的几条 18 毫秒消息后，它以不到 1 毫秒的精度绝对流畅地工作了很多分钟。干得好，IE11.

IE11:

7 : 59 : 25:18

所以，这是怎么回事？为什么这些行为如此不同？如何在所有浏览器中制作流畅的 WebGL 动画？

更新我已将日志记录条件更改为：if(diff > 17 || diff < 16) 并且我看到 Google Chrome 和 FireFox 有时只有几毫秒的间隔，例如 1-2- 3 毫秒。所以看起来他们正试图保持动画 VSynced，但他们做得不是很好。所以我的问题仍然悬而未决。

Answer 1

我在 Chrome 或 Firefox 的 MBP 上看到的情况没有你那么糟糕。事实上，在前 1-3 帧之后我没有发现任何问题。

以下是您的内联示例。我稍微更改了它以使用传递给 requestAnimationFrame 而不是 Date.now 的时间，因为传递给 requestAnimationFrame 的时间应该更准确。

我会注意到我打开了 23 个选项卡，其中许多选项卡（包括 Stack Overflow 本身）在后台执行某些操作，例如发送 websocket 以获取通知等。

PS：我想你的意思是 "fluidly" 而不是 "fluently"？

var prev = 0;
var frameCount = 0;

function frame(now)
{
  ++frameCount;
  var diff = now - prev;
  prev = now;

  if(diff > 20)
  {
    console.log(frameCount, new Date().toLocaleTimeString(), ": ", diff);
  }

  // It's easier to debug things with this at the bottom
  requestAnimationFrame(frame);
}

requestAnimationFrame(frame);

requestAnimationFrame 不流畅

requestAnimationFrame is not fluent

javascript

webgl

requestanimationframe