1655751 - Large and slow web page on re:dash

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[Frank Bertsch [:frank]]

Basic information

Steps to Reproduce:
Go to https://sql.telemetry.mozilla.org/dashboard/firefox-android-beta-migration-dashboard, login, and view dashboard.

Expected Results:
Smooth scrolling, tooltips, etc.

Actual Results:
Very janky, load takes a very long time. Unable to see tooltips until page finishes loading. Page took over a minute to load, then it mostly works (is just a bit janky).

Note: This shows fairly well on Chrome, but possibly worse on Safari. Fresh profile in Firefox still showed bad performance. Page loads almost immediately on Chrome.

---

More information

Screenshot: (if relevant, please attach a screenshot or screencast to this bug report)

Profile URL: (follow the instructions at https://profiler.firefox.com/)
https://share.firefox.dev/3f6CvQt

Basic systems configuration:

OS version: Mac OS 10.14.5

GPU model: Intel UHD Graphics 630 1536 MB

Number of cores: 8

Amount of memory (RAM): 32

Thanks so much for your help.

Comment 1

[Olli Pettay [:smaug][[e-mail]]]

What does "view dashboard" mean? Do I need to do something special with the dashboard?

Also, the profile seems to be taken using Firefox 72, which is rather old. Could you use a recent release to capture the profile?

But yes, loading the page is slow. At least 30% is stylo. (using Nightly)

Comment 2

[Frank Bertsch [:frank]]

Thanks for looking into this, Olli.

What does "view dashboard" mean? Do I need to do something special with the dashboard?

Just means open and look at the page. Nothing special needs to be done, perhaps just scrolling.

Also, the profile seems to be taken using Firefox 72, which is rather old. Could you use a recent release to capture the profile?

Not sure how that happened, I've made a new one: https://share.firefox.dev/30cTjkB

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Yeah, so it seems the page eventually finishes loading and is snappy, but while it loads it's terrible. It seems the page is doing something while it loads that makes us restyle the whole document over and over. Since the document is massive, and growing all the time, that doesn't end up well.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

So what's going on is that as the page loads they append stylesheets to the document. That's fine.

Those stylesheets are usually very simple so we detect that and prepare to invalidate just what we need. But then they inject rules via JS and that's not equally optimized, so we invalidate everything.

The selectors look like this, fwiw: #modebar-e0ce75 .modebar-btn .icon path{fill: rgba(68, 68, 68, 0.3)}.

I think chrome doesn't hit the slow down with the JS mutation of stylesheets, which causes us to restyle much more... This should be fixable, not sure how easy or hard yet though.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1655751 - Fix a silly mistake in which we'd prefer a local name / tag invalidation to an id invalidation. r=#style,heycam

ID invalidations should always win.

This also prefers invalidations deeper in the subtree to higher up.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1655751 - Invalidate for CSSOM changes in a more fine-grained way. r=#style,heycam

Also, for changes in CSS declarations, like changing
cssRules[i].style.color or something, we end up avoiding a lot of the
work we were doing.

This page still trips us in the sense that they add a stylesheet, then
call getBoundingClientRect(), then insert more rules in the stylesheet,
which causes us to rebuild a lot of the cascade data.

We could try to detect appends to the last stylesheet on the list or
something I guess, and avoid rebuilding the cascade data in some cases.

Depends on D85615

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/837f7946e5fb
Fix a silly mistake in which we'd prefer a local name / tag invalidation to an id invalidation. r=heycam
https://hg.mozilla.org/integration/autoland/rev/fb03c1e39a43
Invalidate for CSSOM changes in a more fine-grained way. r=heycam

Comment 8

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/837f7946e5fb
https://hg.mozilla.org/mozilla-central/rev/fb03c1e39a43