1828316 - Material design page is 4x-5x slower to load in Nightly compared to Chrome

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement)

Description

[Mayank Bansal]

Go to https://m3.material.io/theme-builder#/dynamic
The page will take some time to load. Bear with it.
Click on the button on the top of the page that says "Custom"

Nightly(sequential styling) : https://share.firefox.dev/41dtzBJ (wall clock time is ~8 seconds)
Chrome: Wall clock time is ~2 seconds.

WE should be faster, if possible.

Comment 1

[Mayank Bansal]

Hi Emilio. Wonder what you think about this page :)

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Attachment: Somewhat reduced test-case.

Ugh, so this page is doing something really dumb (building a style rule with hundreds of custom properties one custom property at a time), and due to how we store custom properties we're slower.

So there's something to optimize here (avoid the O(n^2) during custom property parsing), but the page is doing something very silly regardless.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

I filed https://github.com/material-foundation/material-theme-builder/issues/158, though we should look into the perf difference in comment 2.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1828316 - Avoid linear search to check for custom property presence. r=#style,#layout

The test-case included goes from 10s to a couple hundred milliseconds on
my machine. No behavior change other than that.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1828316 - Add a perf test. r=#perftest-reviewers

The test-case goes from 10s to a couple hundred milliseconds on my
machine.

Depends on D175612

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/cbfd0c11b248
Avoid linear search to check for custom property presence. r=firefox-style-system-reviewers,zrhoffman

Comment 7

[Iulian Moraru]

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

Comment 8

[Mayank Bansal]

This is the profile from latest Nightly: https://share.firefox.dev/3LbhpU8
Nightly takes ~7 seconds for "Custom" and 2 seconds for "Dynamic". This (switching to "custom") is still slower compared to Chrome, but I dont know if its worth spending more time on this bug.

On the testcase, we are comparable to Chrome now (2 seconds)

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/cb6ec53f2169
Add a perf test. r=perftest-reviewers,AlexandruIonescu

Comment 10

[Atila Butkovits]

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