多请求动画帧性能

作者

如果我正在做多个动画，那么添加多个requestAnimationFrame回调是否符合性能要求？例如：

函数anim1（）{
//为元素1设置动画
}
函数2（）{
//为元素2设置动画
}
函数3（）{
//为元素3设置动画
}
请求动画帧（anim1）；
请求动画帧（anim2）；
请求动画帧（anim3）；

或者它是否被证明比使用单个回调更糟糕：

（函数anim（）{
请求动画帧（anim）；
anim1（）；
anim2（）；
anim3（）；
}());

我这样问是因为我不知道幕后到底发生了什么，requestAnimationFrame当你多次调用它时，它是否在排队回调

我不认为这些答案中有任何一个真正解释了我所寻找的：“don个对requestAnimationFrame的调用”被取消公告（即每帧1个出列），或者所有调用都在下一帧中被调用

当requestAnimationFrame（）排队的回调开始在单个帧中触发多个回调时（mdn）

这表明后者可以在同一帧中调用多个回调

我通过以下测试进行了确认。60赫兹的刷新率转换为17毫秒的周期。如果是前者，两个时间戳之间的间隔不会在17ms以内，但事实并非如此

let sleep=ms=&gt；新承诺（解析=&gt；设置超时（解析，毫秒））；
让更新=异步时间戳=&gt；{
log（'调用更新'，时间戳）
等待睡眠（10）；
requestAnimationFrame（更新）；
}
requestAnimationFrame（更新）；
requestAnimationFrame（更新）；
requestAnimationFrame（更新）；
requestAnimationFrame（更新）；
requestAnimationFrame（更新）；
requestAnimationFrame（更新）；
requestAnimationFrame（更新）；
requestAnimationFrame（更新）；
requestAnimationFrame（更新）；
requestAnimationFrame（更新）；
requestAnimationFrame（更新）；
requestAnimationFrame（更新）；
requestAnimationFrame（更新）；
requestAnimationFrame（更新）；
requestAnimationFrame（更新）

相关文章：

  1. 如何在jQuery中选择具有多个类的元素？
  2. 如何在jQuery中选择具有多个类的元素？
  3. 如何使用jQuery获取元素的ID？
  4. 在jQuery中删除事件处理程序的最佳方法是什么？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with