requestAnimationFrame（）性能问题

Question

我遇到了requestAnimationFrame（）的性能问题。

请考虑以下代码。它是一个简单的循环，每当这个时间增量大于20ms时打印自最后一帧以来的时间。

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，这个代码段永远不会打印任何内容，因为它会尝试每秒运行60次（60Hz作为我的显示器）。 因此，时间差值应该总是在16-17ms左右。

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

我在使用Chrome 54和Firefox 49的Windows 10上体验过这一点。我拥有i5-6600

更新 这里是用于windows和ubuntu的Nit脚本的输出。 Windows，你在做什么？ Windows 10（PC）： WIndows 8（与上面的上网本相同）： Ubuntu（与上面相同的上网本）：

Answer 1

您可以轻松测试您的假设，即该问题与您正在运行的平台相关 - 衡量效果。

不久，运行requestAnimationFrame次数与您的操作类似，并记下每次运行的时间戳。之后，只需将结果可视化。

＆＃13;

＆＃13;

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();

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

正如Travis J在评论中所述，它与操作系统有关。

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