High CPU usage for tab loading animation

SimonSapin commented 6 years ago

Short description

The @keyframes throbber animation is expensive. "Normal" tabs in Firefox 57 / 58 have a similar-looking animation but it’s implemented in a completely different way:

Tree Style Tabs has a zero-size pseudo-element with a solid border, border-radius: 100%, and animates the width and left properties.
Firefox has an SVG sprite (chrome://browser/skin/tabbrowser/loading.svg) as a background-image in a pseudo-element that animates transform: translateX(…) with a steps(60) timing function.

As far as I understand, the latter is cheaper in current Firefox because things with animated transform are often painted into a separate layer that can be preserved and re-composited without re-painting when the transform changes. In comparison, changing the width of something with border-radius requires re-painting it.

Steps to reproduce

Start Firefox with clean profile.
Install TST.
In a terminal, run netcat -l 8888 or some other command to start a TCP server that will accept an HTTP request but never send a response
In Firefox, navigate to http://localhost:8888. This causes the tab to be "loading" until closed or stopped, and shows the "throbber" animation in place of the tab’s favicon.

Expected result

This animation by itself should not use a significant amount of resources.

Actual result

Firefox uses 40% ~ 80% CPU even though it is doing nothing else. This makes loading actual pages slower.

Environment

Platform (OS): Linux x64
Version of Firefox: 58.0a1 (2017-09-26) (64-bit)
Version (or revision) of Tree Style Tab: 2.0 from https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/

Omen-of-Peace commented 6 years ago

hiikezoe mentioned "To be precise, bug 1190721 is also necessary to reduce the CPU usage, so we still need to wait for firefox 58."

I'm on: Firefox 58 b9 TST 2.3.0

Not sure when the relevant commit is supposed to be released, but for me disabling the throbber still results in considerably less CPU during page loads. I also sometimes had the issue where the throbber wouldn't stop (probably a Firefox bug), which caused full CPU usage; the laptop fans would start.

(I used the following code to disable the throbber, but it might be imperfect or overkill - I'm far from a CSS expert.) .throbber { display: none !important; } .throbber::before { animation: unset !important; }

hiikezoe commented 6 years ago

@Omen-of-Peace I guess you might need to set display:none for #master-throbber element. It's the only one animating element for all throbbers in TST, IIUC.

piroor commented 5 years ago

I close this because outdated.

piroor / treestyletab