requestAnimationFrame()性能问题

Question

我经历了requestAnimationFrame()的性能问题。

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

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次(60 to作为我的监视器)。因此，时间增量应该总是在16-17毫秒左右。

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

我在windows 10上体验到了Chrome 54和Firefox 49。我拥有一个i5-6600

在这里更新用于windows和ubuntu的Nit脚本的输出。窗户，你在干什么？Windows 10 (PC)：

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在评论中指出的那样，它与操作系统有关。

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