Cobble UI will eat CPU in the background

[matejdro]

1. Open cobble
2. Minimize cobble (press home button)
3. Open any task manager app (or adb shell top)
4. Not that even though it is in the background, cobble is eating up CPU
5. Open cobble again
6. Exit via back button
7. Check CPU usage again - all is fine

[matejdro]

This appears to be caused by the store WebView. It looks like there is a javascript loop or something on the https://store-beta.rebble.io/?native=true&platform=android.

Issue disappears if I remove the WebView or change URL to something like google.com.

[DreadBoy]

I'd like to offer my insight.

Initial examination

Running profiler on https://store-beta.rebble.io/?native=true&platform=android yields this:

It seems like there's something running all the time but it's not JS loop. More importantly, something is using GPU every 30 ms.

Here's what happens:

It seems like something is forcing Chrome to repaint and composite some layers? Is there JS loop that would update some CSS every 30ms? But no, there are no JS tasks on main thread...

If we contrast this with google.com, there's almost no activity at Google's page:

Drill down

At first I thought there's an issue with gifs, what if we remove them?

Yes, that seems better, we don't tax GPU any more but there's still something going on every 6ms. I'm stumped because I don't know what could cause Update Layer tree & Composite Layer but not any other events. Layout trashing would cause Layout event (in addition to all others) and CSS animation would cause Paint Layer event. I see neither so I don't know what's the issue here...
Hmm, maybe changing z coordinate of transform could cause only Update Layer Tree without causing Layout calculation? Chrome might be smart enough and doesn't Paint Layer if nothing except z-coordinate is changed?

Ok, next step is to disable JS and see what happens... Nothing happens because page doesn't load without JS 😁 Ok, let's load the page first and then disable JS... Nope, even without JS something is causing Update Layer Tree and Composite every 6 ms.

Right, next plan is to take away HTML elements until we find offending element... After playing around with element tree, I figured out the issue is with loader for each watchface. I didn't take a look at source code yet but I see each watchface has some svg loader which I never see in page but I can see them in element tree. If I remove all of them with [...document.querySelectorAll('.loader')].forEach(l => l.remove()), performance looks much better

There are no Update Layer Tree and Composite Layer events, just Raster and GPU doing their work do animate those gifs. To me, this seems fine. So, what's the issue with loaders? Are they really causing such performance issue in Flutter's WebView?

Tune in next time to see if loaders are really the culprit or if there's something else messing with us...