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

Question

我正在使用不错的 UI 工具（如 ReactJS、requestAnimationFrame 等）开发一个 Phonegap 应用程序。

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

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

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

• JavaScript
• 样式计算
• 布局
• 绘画设置和绘画
• 复合

我可以通过查看框架来了解 Chrome DevTools 中每个的性能。我的 Js 代码非常快，这要归功于 React 如何优化 dom 操作，并且大部分时间都在 16 毫秒以下。

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

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

---

• 是否有任何工具可以检查大多数流行移动设备的浏览器渲染帧？
• 是否有一种简单的方法可以降低我的计算机速度，使其在性能方面表现得像一部手机？
• 手机上运行的其他应用程序可能会占用手机的部分资源，这会产生什么影响？

Answer 1

您可以将远程网络检查器与手机连接起来，以配置渲染性能，就像在计算机上一样。这在 iOS 6+ 和 Android 4.4 上受支持，假设应用程序处于调试模式。但是，连接远程 Web 检查器会扭曲结果，因为它本身会带来严重的性能提升。

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

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

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