Poor performance on Firefox for Android

[nolanlawson]

This is something that's bugged me since the start of the project.

On Chrome for Android, the app is virtually indistinguishable from a native app. Scrolling is smooth, animations are crisp, everything looks lovely. Mission accomplished!

On Firefox for Android (or FirefoxOS), though, the scrolling is jerky and the transition animations are slow to start and slow to run. In fact, I had to put in a hack to run the animations in two stages, because otherwise there wasn't even a chance they'd run at 60 FPS.

I tested this on a Nexus 5 (both Lollipop+Firefox and FxOS), a Flame phone (FxOS), and a Nexus 5X (Marshmallow). In all cases I was using Firefox Beta (latest I tested was 44). TBQH the performance is better on a Galaxy Nexus running Chrome Beta, which is sad.

I considered two possible culprits for the slowness, but neither turned out to be correct:

1. The base64-encoded CSS sprites. I thought: maybe this is slower in Firefox than just using regular PNG files? I tried removing these CSS files entirely, though, and the performance was still bad.
2. The number of elements in the list. Even when you filter to create a smaller list (e.g. enter "s" so that it shows all Pokémon whose names start with "s"), the scrolling and animation performance is still bad, even though far fewer DOM elements are in the list.

So what else could it be? I'm not sure whether this is indicative of a perf problem in the app, or in Firefox itself. Regardless, it bums me out, because Firefox for Android is my preferred browser, and my own app doesn't run well on it. :(

/cc @mbrubeck @wanderview @flaki

[flaki]

Hey! Thanks for putting the effort in there! I can see & reproduce the issues you mention but it would be nice if we could put something like a "force Highspeed Animation mode" toggle or something, so we could more easily debug this (without hacking the browser UA).

[nolanlawson]

Thanks a lot! I just noticed this warnings in Firefox Dev Edition, so maybe that's a good starting point. I definitely might have overused will-change:

[flaki]

Yup, could be an issue. Also, overall performance is certainly better on Firefox OS (Z3 Compact) than on Nightly on Android (Z3 Compact as well), but there is this ~.5-1s delay between click on the pokemon and the animation bringing up the stats panel on both devices — so there is certainly something fishy going on there.

(dunno if that's is a sheer-hardware-power-thing but on Firefox on OSX (i7 Air) this seems to be working fine, though)

[karlcow]

The bugs related to will-change at Mozilla https://bugzilla.mozilla.org/show_bug.cgi?id=will-change if it is related. We still need to have a better understanding.

[nolanlawson]

Awesome, I'll try removing some of those will-changes and see what happens. I don't even think they boost the performance much in Chrome anyway.

[wanderview]

The best thing to do here would be to get a profile for the site:

https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler

It looks like profiling on firefox for android requires some extra setup, though. I'll see if I can find someone with it already configured.

[flaki]

@wanderview thanks a lot for chiming in! Is this something like what you meant?

[montogeek]

There are some recommendations about use will-change in the MDN docs site. https://developer.mozilla.org/en/docs/Web/CSS/will-change

[NekR]

@nolanlawson

I had to put in a hack to run the animations in two stages, because otherwise there wasn't even a chance they'd run at 60 FPS.

Btw, you are checking for all 4.x Android version, but 4.4 is fast enough. I mean, phones with 4.4 has good hardware and also, 4.4 has Chrome WebView, so it should be fast enough.

I know you have Galaxy Nexus, try flashing Cyanogenmod 11 (Android 4.4) to it and check performance :-)

[NekR]

@wanderview Firefox is just slow on mobile, especially scrolling..