1652698 - Frog test website performs very poorly relative to Chrome

Status: VERIFIED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[Vash63]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:80.0) Gecko/20100101 Firefox/80.0

Steps to reproduce:

Attempted to load a test website that uses 185k DIV elements to render a frog. Page is:
https://rph.space/image2css/2

Not sure how useful this is but the performance difference between Chrome and Firefox is dramatic so it seemed worth submitting.

Actual results:

After 30+ seconds on my 2013 MBP on FF Nightly with WebRender, gave up and killed the process.

Expected results:

In Chrome it loads in less than 5 seconds and has no performance issues

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Jeff Muizelaar [:jrmuizel]]

It looks like it's spending all of it's time in style:
https://share.firefox.dev/3frdErC

Comment 3

[Emilio Cobos Álvarez (:emilio)]

So the stylesheet is basically a bunch of rules like:

#p0x0 { background-color: #xxx }

And it's the last thing added to the document. All those are simple selectors, so we end trying to invalidate as little as possible by matching them... But this ends up being O(n^2) so for huge sheets like this it ends up being super slow.

I think this should be relatively straight-forward to fix.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1652698 - Make stylesheet invalidation faster. r=#style

This fixes performance issues when there's a massive number of rules and
a massive DOM.

Instead of going through all rules for all the DOM, we now look stuff in
hashmaps.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b5ce43e79347
Make stylesheet invalidation faster. r=heycam

Comment 6

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/b5ce43e79347

Comment 7

[Bogdan Maris, Desktop QA]

Reproduced the initial issue with an old Nightly from 2020-07-14 using macOS 10.15.6, verified that the page loads in a reasonable time (comparable with Chrome) using Firefox 80.0 RC across platforms (macOS 10.15.6, Windows 10 64bit, Ubuntu 18.04).