检查移动或phonegap应用程序上的浏览器呈现性能

Question

我正在使用漂亮的UI工具（如ReactJS）和requestAnimationFrame以及类似的东西来开发Phonegap应用程序。

我正在尝试渲染60fps的性能。

根据这篇文章： http://calendar.perfplanet.com/2013/the-runtime-performance-checklist/

要获得60 fps，浏览器必须能够在16毫秒内完成以下操作：

• 的JavaScript
• 样式计算
• 布局
• Paint Setup＆amp;油漆
• 组合

通过查看框架，我可以看到每个Chrome DevTools的性能。我的Js代码非常快，这要归功于React如何优化dom操作，并且在大多数情况下整体适合16ms。

但是，这些信息适用于我的计算机，CPU和GPU ......

我有兴趣为不同的移动设备提供这些信息，了解它们的行为方式，并了解60 fps的最低设备级别。

---

• 是否有任何工具可以检查大多数流行移动设备的浏览器渲染帧？
• 是否有一种简单的方法可以减慢我的电脑速度，使其在演出方面表现得像手机一样？
• 手机上运行的其他应用可以使用某些手机资源的影响怎么样？

Answer 1

您可以使用手机将远程Web检查器与您的计算机上的渲染性能相关联。假设应用程序处于调试模式，iOS 6+和Android 4.4都支持此功能。但是，连接远程Web检查器会导致结果失真，因为它会导致严重的性能提升。

如果您只想测量原始fps，我的建议是注入stats.js，一个显示fps图的小部件：

• https://github.com/mrdoob/stats.js/

我用它来对不同的游戏引擎进行基准测试并得到了不错的结果。