Monitoring and reacting to low performance in the browser.

[gjbarter]

Hi all,

 

I'm currently building a HTML5 game (Canvas, EaselJS) and am encountering some slow down on the lower part of my supported devices (iPhone 4 running iOS7).

 

Some of the assets that i'm using are quite intensive but ideally i don't want to remove them from the entire game just because of low performance on certain mobile browsers.

 

I was wondering does anyone know of any reliable method for performance monitoring in real time that's stable across all browsers, both desktop and mobile.?

 

I've previously monitored the FPS and then measured the average over a period of time, then if it was below say 18fps on average i would remove the intensive assets from the game. I don't think this is the most stable method though as frame rate can be a bit unreliable on mobile and tends to jump and fall quite sporadically. 

 

I was also wondering if there was any way to monitor memory consumption through the browser? I highly doubt it but thought it was worth an ask...

 

Thanks,

[Mike]

Hi, I post something about checking performance in another topic.

 

Chrome profiler is good tool

 

Check this:

http://www.html5rock...vas/inspection/

and this:

http://www.realtimer...rofiling-tools/

 

Also a nice way to fix the mobile browser issue is to serve them different assets... fewer resolution and fewer animation frames...

 

I'll be glad to learn other ways of dealing with iOS Safari browser ... or stock Android... but I have some fear that there isn't much to do for them.

[Chris]

What about something games are doing like a million years on PCs: offering a options dialog where you can pick a lower resolution or reduce some effects if you notice that the game doesn't run smoothly on your device?

 

I personally always hated computergames that tried to predict how a game would run on my pc and made some automatic graphics configuration out of that predicion. It was a false prediction 90% of the time...

[gjbarter]

That's a good option, however it's for young children so really cannot be user controlled.

 

What I've gone for at the moment is the method i mention in my first post, where the framerate monitor stores the last 3 seconds framerate, and then calculates the average and adjusts what's rendered on screen. Once it's toggled to low performance it scans through what's on screen and removes anything that can be removed (background assets) and prevents new assets from being created.

 

This method seems to be fairly accurate as the 3 second monitoring period is enough to ensure it's not just a blip in the framerate. The one thing i'm doing at the moment is that once the framerate has dropped, i toggle to low performance and it remains like that throughout the session. It's not ideal but it seems the most accurate way of monitoring across browsers/devices.

 

One of the major problems with this method is when the user changes to a different tab, most modern browsers reduce the framerate (a different value for each browser as well) when not active, so even if the browser is able to handle some intensive assets it still toggles it into low performance mode. If someone knows a way to set what the browser reduces the framerate to that would be great as well.

 

I'm going to try and reduce the impact of the assets as well, as mentioned in the first reply, especially when on a smaller resolution. And then hopefully if there is some slowdown after that, my framerate monitor will deal with it and the user would be none the wiser.

[Chris]

When you are using requestAnimationFrame for your game, then the game should not drop framerates but completely stop when the user switches to another tab.