Closed Bug 1652698 Opened 3 months ago Closed 2 months ago

Frog test website performs very poorly relative to Chrome

Categories

(Core :: CSS Parsing and Computation, defect)

80 Branch
defect

Tracking

()

VERIFIED FIXED
mozilla80
Tracking Status
firefox80 --- verified

People

(Reporter: Vash63, Assigned: emilio)

Details

Attachments

(1 file)

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

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

Component: Untriaged → Graphics: WebRender
Product: Firefox → Core

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

Component: Graphics: WebRender → CSS Parsing and Computation
Flags: needinfo?(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.

Assignee: nobody → emilio
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(emilio)

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.

Severity: -- → S3
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/b5ce43e79347
Make stylesheet invalidation faster. r=heycam
Status: NEW → RESOLVED
Closed: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla80
Flags: qe-verify+

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).

Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.