CODEWITHSUNDEEP
performancecordovamobilebrowserreactjs
Sebastien Lorber
Sebastien Lorber

Reputation: 92130

Inspect browser rendering performances on a mobile or phonegap application

I am developping a Phonegap application using nice UI tools, like ReactJS, with requestAnimationFrame and things like that.

I am trying to have rendering performances of 60fps.

According to this article: http://calendar.perfplanet.com/2013/the-runtime-performance-checklist/

To have 60 fps, the browser has to be able to do, under 16ms, the following:

I can see the performance of each in Chrome DevTools by looking at the frames. My Js code is pretty fast thanks to how React optimises the dom manipulations, and the whole fit under 16ms most of the time.

However, these informations are for my computer, my CPU and GPU...

I'm interested to have these informations for different mobile devices, to see how they will behave and to know what is the minimum device level to have 60 fps.

Upvotes: 1

Views: 323

Answers (1)

krik
krik

Reputation: 539

You could hook up a remote web inspector with the phone an profile the rendering performance like you would on your computer. This is supported on on iOS 6+ and on Android 4.4, assuming the app is in debug mode. However, hooking up the remote web inspector distorts the results as it imposes a serious performance bump itself.

If you're just interested in measuring raw fps my suggestion is to inject stats.js, a little widget that displays a fps graph:

I used this to benchmark different game engines and got decent results.

Upvotes: 1

Related Questions