1769131 - Firefox janks for ~1.5-2x as long as Chrome in click handler, when unchecking a topic at https://twitter.com/settings/your_twitter_data/twitter_interests

Status: NEW

(Core :: JavaScript Engine, task, P3)

Description

[Daniel Holbert [:dholbert]]

STR:

1. Log in to a twitter account
2. Visit https://twitter.com/settings/your_twitter_data/twitter_interests
   (Note: for me, this^ page has ~hundreds of entries; not sure how many are required to trigger the perf issue here, but I suspect you need lots.)
3. Start profiling.
4. Click one of the interest topics to un-check its checkbox.
5. Stop profiling.

ACTUAL RESULTS:
This is noticeably less responsive in Firefox as compared to Chrome. My profile bears that out, too; the click action takes ~1.5-2x as long in Firefox vs. Chrome.

Firefox profile, with 2 clicks (where the click handler takes 421ms and 336ms, respectively):
https://share.firefox.dev/3FE00zg

If I perform the same operation in Chrome, the click handler duration is between 190ms to 240ms.

Comment 1

[Daniel Holbert [:dholbert]]

Here's another profile, with 5 clicks (unchecking 5 topics). 4/5 are in the 360-390ms range, and one (the second one) is a little faster at 335ms.

(Still about 1.5x of the durations that I observed from Chrome in its profiler, anyway.)

Comment 2

[Daniel Holbert [:dholbert]]

link for the profile described in comment 1: https://share.firefox.dev/3FDRgco

Comment 3

[Matthew Gaudet (he/him) [:mgaudet]]

I think this is another one under the React bucket; not sure if you want to take a look Iain.

(Myself, I can't reproduce, but my machine is very fast)

Comment 4

[Daniel Holbert [:dholbert]]

(In reply to Matthew Gaudet (he/him) [:mgaudet] from comment #3)

(Myself, I can't reproduce, but my machine is very fast)

FWIW I reported this from a pretty fast machine as well; it's my main development machine, which is a ThinkPad P15 Gen 1, purchased about a year ago.

(In reply to Daniel Holbert [:dholbert] from comment #0)

STR:

1. Log in to a twitter account
2. Visit https://twitter.com/settings/your_twitter_data/twitter_interests
   (Note: for me, this^ page has ~hundreds of entries; not sure how many are required to trigger the perf issue here, but I suspect you need lots.)

To fill in the "how many entries" detail here, since that's probably relevant for how-expensive-this-operation-is: it looks like I currently have 654 "interests" listed here. I got that number by inspecting one of my interests in devtools, and then selecting its parent (an unstyled <div>), and then evaluating $0.childElementCount in my web console.

Comment 5

[Matthew Gaudet (he/him) [:mgaudet]]

Interesting; I have the exact same count as you (algorithm limit perhaps?)

On my machine (M1 Max MBP), I'm only seeing 190ms jank when clicking in my profile

Comment 6

[Iain Ireland [:iain]]

It looks like the vast majority of time (in both profiles) is in code from https://abs.twimg.com/responsive-web/client-web/vendors~main.b550e1d6.js, and in particular line 85, which is react-dom-production.min.js.

So yeah, this goes in the React bucket.