PF6: Performance is horrible with Firefox devtools (this is not a problem in PF5)

[garrett]

Please describe the issue

1. Visit the PF6 staging website @ https://staging-v6.patternfly.org/ in Firefox. (Or any component page. Every page seems affected)
2. Open the developer tools (F12 or right-click and select an element)
3. Try to select an element to inspect.
4. Notice several seconds of the browser being frozen.

Resizing the window also takes a very long time. This is also a bit janky in Chrome now too.

Additionally, my CPU fan kicks on and spins up.

Any other information?

This wasn't a problem in PF5.

As we ship Firefox as the browser for our own products at Red Hat and it's what our customers use in RHEL, we need to develop for and test for Firefox as a tier 1 browser. (It's also the right thing to do overall, to support major browsers.) Having its development tools being this slow makes it unusable in PF6.

There was something (or some things) introduced in PF6 that was not in PF5 that causes massive performance penalties.

Is there anything listening for browser resizes and/or trying to compute layout in JavaScript instead of using CSS? That would dramatically affect performance like this, and it would affect people with slower computers and those using mobile devices (phones and tablets) as well as us developers.

[garrett]

I've asked the team I work with in the Cockpit project (RHEL Web Console) to check and verify that they have these issues as well. They do. This is not isolated to my work laptop.

While I know this is (so far) Firefox on Linux; I am not sure how it is on macOS or Windows. It is probably similar, but haven't been able to check yet.

But even Firefox on Linux is enough to raise huge warning sirens here:

• Firefox is our official browser in RHEL (specifically Firefox Extended Service Release in RHEL)
• Red Hat is full of developers making the software we ship to customers (many using RHEL, many using Fedora, some using other systems)
• we're targeting our web apps to also work on RHEL

...so it's important that this major performance regression is addressed.

[garrett]

In Slack, @srambach mentioned that people on the PatternFly team have seen this problem on macOS/Chrome and have been talking about investigating it.

Hopefully running git bisect would work to help find the problem! Best of luck! I'm happy to re-test on my end too; just let me know if/when there something to test. Thanks!

[apollo13]

I am seeing the same in my project. So it is not just a cockpit specific issue. Chrome/ium performs a bit better but Firefox is basically unbearable.

[garrett]

To be clear: We don't see this in Cockpit, as we aren't using PatternFly 6 yet — I asked them to check out the PF6 docs site. It'll take a lot more effort to switch Cockpit to PF6. We'll eventually upgrade at some point in the future.

(I was looking into PF6 for other reasons and noticed this huge performance issue on the staging site, on every page. It will affect everything using PatternFly 6.)

As far as Cockpit is concerned, this will be a nightmare, as many of us use Firefox by default for development (as it is what RHEL customers will see, and many of us prefer using Firefox, as it's the only non-Google browser engine aside from WebKit based ones like GNOME Web and Safari). So hopefully it'll be figured out and fixed soon. I'd suggest marking this as critical and a release blocker. Hopefully there isn't a fundamental problem with PF6, but there might be. But PF6 should not be released in this state regardless.

Thanks for confirming that it happens to you too, @apollo13! The more folks saying that they also see this problem, the more visibility this issue might get.