Panorama-tab-groups: Switching tabs groups is slow and really resource intensive

🤔 I experienced a slightly slower switching with a lot of groups.

Would you tell us some numbers, please?

How many groups/tabs do you have?
How do you measure the resource intensity?

I have two groups, one with 219 tabs, the other with six.

The fans on my system start spinning and if I'm playing audio via reader mode. The audio stops and stutters.

System: Nightly, Fedora 29, Intel® Core™ i7-4710HQ CPU @ 2.50GHz × 8, GeForce GTX 860M/PCIe/SSE2.

I see from the code that the page is reloaded every time the tab group view is switched to. When visibilitychange event is triggered because the document is visible (document.hidden === false) it calls captureThumbnails for each tab, then it reloads the page and then it calls captureThumbnails again. It stores the thumbnails in session, but it never loads them. So, there is some room for improvement here:

• Don't reload the page every time it is shown
• Don't capture thumbnails right before reloading the page
• Lookup thumbnails from session instead of capturing again (or don't save to session, if it's not needed)

I can take a look at these if you want

That’d be great! Thanks for looking into this :) I’m still on holidays until Saturday evening PST so I appreciate all the work you guys have been doing!

I've looked into it a bit, and I think it would help with some kind of virtual dom library here. I'm hesitant to bring it all of react though, but something is needed to work around the reloading of the entire page each time the page is shown. What is needed is a simple way to update the dom with only the things that have changed, and since potentially everything could have changed when the page is shown, something more clever than manually updating the dom nodes would probably help. What do you think? Any library you have good experiences with?

There might be a slight case of over-engineering here. The first thing I thought of was how about an option to just disable thumbnails? That way people with a large amount of tabs might experience some immediate improvement without us having to add a large amount of code upfront.

Some other things I could think of: the number of tabs opened since last view. If it's the same, just don't reload tabs. If there are new tabs, potentially there might be a way to load only those thumbnails and pull the rest from cache? Something to think about tomorrow

So I think I may have found (one of) the bigger sources of this (at least when not switching to the panorama view. That's its own can of worms).

It looks like the browser.tabs.onUpdated listener actually listens to a pretty wide range of events, only some of which actually matter to keeping the panorama view up to date. Of note, if you don't set any filters it will fire every time an individual tab is hidden or unhidden, which is something that happens quite a few times every time you switch groups. Filtering out some of the less relevant events seems to speed things up pretty massively.

I'm currently working on a branch which includes several substantial performance optimizations, including the above. It's going to take me a bit longer to finish (especially because there's still one inexplicably long CPU spike I'm trying to track down), but it's looking pretty promising so far.