requestAnimationFrame() 性能问题

Question

我遇到了 requestAnimationFrame() 的性能问题。

考虑以下代码。这是一个简单的循环，每次这个时间增量大于 20 毫秒时打印自上一帧以来的时间。

const glob_time_info = {delta_time: 0.0, last_frame: performance.now()};

var render = function (timestamp) {
    glob_time_info.delta_time = timestamp - glob_time_info.last_frame;
    glob_time_info.last_frame = timestamp; 
    if(glob_time_info.delta_time > 20)
        console.log(glob_time_info.delta_time);
    requestAnimationFrame(render);
};
render(performance.now());

据我了解 requestAnimationFrame 这个 sn-p 不应该打印任何东西，因为它试图每秒运行 60 次（60Hz 作为我的显示器）。 因此，时间增量应始终在 16-17 毫秒左右。

但它每隔几秒打印一次大约 33 毫秒。 为什么？

我在 Windows 10 上使用 Chrome 54 和 Firefox 49 遇到过这种情况。我拥有一台 i5-6600

---

更新 这里是 Nit 的 windows 和 ubuntu 脚本的输出。窗户，你在做什么？ 视窗 10（电脑）： WIndows 8（与以下相同的上网本）： Ubuntu（与上面相同的上网本）：

Answer 1

很容易检验您的假设，即问题与您所运行的平台有关 - 衡量性能。

简而言之，运行requestAnimationFrame 的次数与您所做的类似，并记下每次运行的时间戳。然后简单地可视化结果。

var times = [];
var measure = function() {
  times.push(new Date().getTime());
  if (times.length > 100) return draw();
  requestAnimationFrame(measure);
};
var draw = function() {
  var dataset = {
    x: [],
    y: [],
    type: 'bar'
  };
  var layout = {
    xaxis: {
      title: 'measurement #'
    },
    yaxis: {
      title: 'iteration duration (ms)'
    },
    height: 250
  };
  var options = {
    displayModeBar: false
  };
  times.reduce(function(previous, current, i) {
    dataset.x.push(i);
    dataset.y.push(current - previous);
    return current;
  }, times.shift());
  Plotly.newPlot('target', [dataset], layout, options);
}
measure();

#target {
  margin-top: -50px;
}

<script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script>
<div id="target"></div>

您可以在不同的操作系统和不同的浏览器上运行相同的模拟，看看是否可以进一步缩小问题范围。

Answer 2

正如 Travis J 在 cmets 中所说，它与操作系统有关。

这个性能问题不会出现在 linux 上。所以我（我们）对此无能为力。