javascript - RequestAnimationFrame 行为..它是如何工作的?

标签 javascript performance-testing

我一直在研究 chrome 的 requestAnimationframe,想知道它的实际行为。

当我加载我的 Canvas 并绘图时,我得到一个稳定的 60FPS。如果我像单击一样使用偏移量滚动并在 map 上拖动,FPS 将下降(如预期的那样)...一旦我停止在 map 上拖动,FPS 再次按预期爬升至稳定的 60fps。

在这里我想知道这是否是为 requestAnimationframe 设计的。如果我拖动 map 直到 FPS 下降,在很长一段时间内下降到 30 以下,一旦我停止拖动,它就会爬回来,但这次它达到 30FPS 并且不会更高。浏览器似乎认为 30FPS 可能是最佳选择。

这是浏览器故意做的吗,我一直在试图找出是否是这种情况。因为如果我长时间不低于 30fps,它将达到 60fps。

最佳答案

是的,这是浏览器能够做到的事情。
在这里,“它应该如何工作”并不是任何人都能回答的问题。

原因很简单,引擎盖下是 100% 特定于浏览器的。
但可以肯定地说,是的,浏览器能够决定您何时应该锁定在 30Hz 刷新率,而不是 60Hz 刷新率。

为什么会这样:

如果 vendor 需要,

requestAnimationFrame() 也绑定(bind)到页面可见性 API(对于 Chrome 来说非常正确)。
基本上,如果页面不可见,他们可以将 requestAnimationFrame() 更新减慢到每秒几次或完全暂停它们。

鉴于这些知识,相信以下两种情况之一正在发生是完全合理的:

  1. 他们有意将您的帧率限制在 30fps,因为他们认为根据平均性能数据,您的体验在那里会更加稳定

  2. 他们是故意限制你的,但系统中有一些错误(或一些不太宽松的数学)阻止你回到 60,在海岸清理后,.如果他们 < em>正在使用平均性能数据,那么这可能是问题的一部分。

无论哪种方式,它至少大部分是故意的,唯一没有回答的问题是为什么它坚持 30fps。 事后您是否将其单独放置 20 或 30 分钟,以查看它是否会在之后的任何时候恢复正常?

关于javascript - RequestAnimationFrame 行为..它是如何工作的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14997747/

相关文章:

javascript - jQuery 表单验证。如何防止错误消息多次出现

javascript - 如何在我的网站上添加 "Add to Favorites"按钮或链接?

对象的 Javascript 计数数组

mysql - 如何在 JMeter 中通过 JDBC 采样器运行多个 MySQL 语句

javascript - 在 Javascript 中将数组转换为对象

javascript - 为什么 $.when.apply 没有按预期工作

google-chrome - 在Chrome DevTools中测量整页大小

testing - 如何在 Jmeter 中找到准确的 "Total Testing duration time"?

Jenkins 在实际失败时验证 JMeter 构建成功

protractor - 使用 Protractor 进行性能测试