Javascript requestAnimationFrame（）性能问题

我遇到了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毫秒左右。 为什么?

我在Windows10上用Chrome54和Firefox49体验到了这一点。我有一台i5-6600

---

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

---

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

---

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

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

---

linux上不会出现此性能问题。因此，我（我们）对此无能为力。

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

简单地说，运行

requestAnimationFrame

与您的操作类似的次数，并在每次运行时记下时间戳。然后简单地将结果可视化

var时间=[]；
var度量=函数（）{
push（newdate（）.getTime（））；
如果（times.length>100）返回draw（）；
请求动画帧（测量）；
};
var draw=function（）{
变量数据集={
x:[]，
y:[]，
类型：'bar'
};
变量布局={
xaxis：{
标题：“测量#”
},
亚克斯：{
标题：“迭代持续时间（ms）”
},
身高：250
};
变量选项={
displayModeBar:错误
};
减少次数（功能（先前、当前、i）{
dataset.x.push（i）；
dataset.y.push（当前-上一个）；
回流；
}，times.shift（））；
Plotly.newPlot（'target'，[dataset]，布局，选项）；
}
度量（）
#目标{
利润上限：-50px；
}
很容易验证您的假设，即问题与您正在运行的平台有关-测量性能

简单地说，运行
requestAnimationFrame
与您的操作类似的次数，并在每次运行时记下时间戳。然后简单地将结果可视化


var时间=[]；
var度量=函数（）{
push（newdate（）.getTime（））；
如果（times.length>100）返回draw（）；
请求动画帧（测量）；
};
var draw=function（）{
变量数据集={
x:[]，
y:[]，
类型：'bar'
};
变量布局={
xaxis：{
标题：“测量#”
},
亚克斯：{
标题：“迭代持续时间（ms）”
},
身高：250
};
变量选项={
displayModeBar:错误
};
减少次数（功能（先前、当前、i）{
dataset.x.push（i）；
dataset.y.push（当前-上一个）；
回流；
}，times.shift（））；
Plotly.newPlot（'target'，[dataset]，布局，选项）；
}
度量（）
#目标{
利润上限：-50px；
}

它固定在16，运行时会发生变化。可能与垃圾收集和计算机正在做的其他事情有关。“尝试”是关键字，如果有什么东西阻塞了线程，即使是几毫秒，它也不再成功。我还考虑了GC，但每隔几秒钟？他必须收集什么：）如果每几秒钟帧速率下降到30 fps或更差，你如何制作平滑动画
，如果每几秒钟帧速率下降到30 fps或更差，你如何制作平滑动画
-通过制作基于时间而非基于帧的动画这很可能是相关的操作系统运行CPU的方式与您的代码无关。它被固定在16，当我运行它时会发生变化。可能与垃圾收集和计算机正在做的其他事情有关。“尝试”是关键字，如果有什么东西阻塞了线程，即使是几毫秒，它也不再成功。我还考虑了GC，但每隔几秒钟？他必须收集什么：）如果每几秒钟帧速率下降到30 fps或更差，你如何制作平滑动画
，如果每几秒钟帧速率下降到30 fps或更差，你如何制作平滑动画
-通过制作基于时间而非基于帧的动画这很可能是相关的操作系统运行CPU的方式与您的代码无关。“它与操作系统有关”-好吧，这里是windows 10和功能较弱的CPU：我每次迭代得到15-16ms。我也得到15-16ms，但每隔几秒钟就会出现峰值。你试过我的代码片段吗？没有，我运行了另一个答案中的一个。我在问题中添加了图表。是的，看起来很不错！奇怪的我们需要用户研究，更多数据！：）“它与操作系统有关”--嗯，这里有一个windows 10和一个功能较弱的cpu：我每次迭代得到15-16ms。我也得到15-16ms，但每隔几秒钟就会出现峰值。你试过我的代码片段吗？没有，我运行了另一个答案中的一个。我在问题中添加了图表。是的，看起来很不错！奇怪的我们需要用户研究，更多数据！：）谢谢我把图片放在问题里了。谢谢！我把图片放在问题里。