檢查瀏覽器在移動應用程序或phonegap應用程序上的渲染性能

Question

我正在使用UI界面工具（如ReactJS）和requestAnimationFrame等開發Phonegap應用程序。

我試圖讓60fps的渲染性能。

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

要有60幀，瀏覽器必須能夠做到，16ms的下，執行以下操作：

• 的JavaScript
• 式計算
• 佈局
• 油漆設置&油漆
• Composite

通過查看框架，我可以在Chrome DevTools中看到每個表現。我的Js代碼非常快，這要歸功於React如何優化dom操作，並且大部分時間整個契合度低於16ms。

然而，這些信息是我的電腦，我的CPU和GPU ...

我感興趣讓這些信息對於不同的移動設備，看看他們將如何表現，要知道什麼是最低設備級別有60 fps。

---

• 是否有任何工具來檢查瀏覽器中呈現爲最流行的移動設備的框架？
• 有沒有一種簡單的方法來放慢我的電腦，使其表現像手機一樣？
• 手機上運行的其他應用程序可能會使用某些手機資源的影響如何？

Answer 1

您可以使用手機掛載遠程網絡檢查器，查看您的計算機上的渲染性能。這在iOS 6+和Android 4.4上受支持，假設應用程序處於調試模式。但是，連接遠程網絡檢查員會扭曲結果，因爲它會造成嚴重的性能下降。

如果你在測量原料FPS我的建議只是感興趣的是注入stats.js，顯示一個FPS圖表的一個小玩意兒：

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

我用這個基準不同的遊戲引擎，並取得不俗的成績