1943629 - UAWidget for video element is flushing style and whatnot (with 5000 dynamically-appended video elements generating tens of seconds of jank)

Status: NEW

(Core :: Layout, defect)

Description

[Mayank Bansal]

Attachment: Video-elements.HTML

Open any of the attached testcases
Enter 5000 in the input
Click on generate

Video
nightly: https://share.firefox.dev/4hubYgE (21s+ 11s)
Chrome: https://share.firefox.dev/4aunyps (all video element visible after 1.2 seconds!)

Audio
Nightly: https://share.firefox.dev/4jw6pjj
Chrome: https://share.firefox.dev/3CbMkOL

By whatever magic, 5000 video elements are visible in Chrome in 1.2 seconds. We take 21s for the elements to appear.
Olli suggested i file a bug separate from bug 1943230

Comment 1

[Mayank Bansal]

Attachment: Audio Elements.HTML

Comment 2

[Mayank Bansal]

Full disclaimer: The testcases were generated by ChatGPT

Comment 3

[Mayank Bansal]

Is there anything low-hanging stuff to fix here?

Comment 4

[Daniel Holbert [:dholbert]]

(In reply to Mayank Bansal from comment #0)

Video
nightly: https://share.firefox.dev/4hubYgE (21s+ 11s)

This scenario (thousands of videos with browser controls loading at once on the same page) is probably edge casey enough to make it not a priority.

But, here are some observations from the initial 21s jank:

• There are 10,312 samples during that 21s jank period. [1] Here's the profile zoomed to that region: https://share.firefox.dev/4jXZa3i
• Of those, 8671 (84%) are in the videocontrols.js "onsetup" function: https://share.firefox.dev/44eO0CH
• About half of those are from style flushes when videocontrols.js tries to read back its computed styles, e.g. here (and see the code-comment highlighting that we're retrieving computed dimensions and that's bad):
  https://searchfox.org/mozilla-central/rev/91cd9f3b8047176d84624ee2b8431e859f8d7bef/toolkit/content/widgets/videocontrols.js#498-499,507-508
  If we wanted to optimize this, I think that'd be the obvious place to start (avoiding triggering style flushes from the code that gets run to setup the video/audio controls).

Also, 747 samples seem to be from "startFade" calling "KeyframeEffect constructor" (and that represents probably 1.5s here, given that ~21s is ~10.3k samples). That might be interesting to look into as well.

[1] (not sure why 21s didn't get ~21000 samples in this profile the Profile Info tooltip shows Interval:1ms. But not a big deal, and it's probably something subtle/unimportant that I'm not aware of.)