Firefox freezes when inspecting element with many CSS variables (youtube.com)
Categories
(DevTools :: Inspector, defect)
Tracking
(Not tracked)
People
(Reporter: nyanpasu64, Unassigned)
Details
Attachments
(1 file)
|
790 bytes,
text/html
|
Details |
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:75.0) Gecko/20100101 Firefox/75.0
Steps to reproduce:
- Visit a Youtube video using the new Polymer-based interface, eg. https://www.youtube.com/watch?v=jNQXAC9IVRw
- Press F12
Actual results:
Browser hangs for several seconds loading Inspect Element / Developer Tools / Inspector. This is because Youtube defines hundreds/thousands of CSS variables at the html element level, and Firefox takes a long time to load them.
Expected results:
Firefox Inspect Element doesn't freeze while loading many CSS variables.
Test Case
I attached a synthetic test case which defines CSS variables in the <b> tag scope. The more times you press the button, the more variables are created. Pressing F12 (which highlights the <body> tag) does not freeze Firefox, but focusing the <b> tag (sometimes you need to press the right arrow key) makes the browser freeze for varying lengths of time.
On my computer in a nearly-fresh profile (uBlock Origin installed but disabled), I timed how long Firefox freezes:
- 400: 600ms
- 800: 1.8s
- 1600: 4.9s
- 3200: 17.5s
- 6400: 107s
The growth appears to be somewhere near quadratic, but not fitting a quadratic curve cleanly. 6400 is significantly slower than expected.
Analysis
The main process freezes, not the content process. If I terminate the process burning CPU, the entire browser closes down.
Firefox Profiler trace (1600 elements) at https://perfht.ml/2Wm3sbv . The CPU usage occurs in Parent Process, with the process being stuck in the following function:
hasCSSVariable
hasCSSVariable
_hasUpdatedCSSVariable
updateDeclarations
onRuleUpdated
populate/populated<
js::RunScript
promise callback
XREMain::XRE_main
(root)
I don't know the codebase well enough to diagnose and fix the bug though.
|
||
Updated•4 years ago
|
|
||
Comment 1•4 years ago
|
||
Thanks for investigating and filing this issue.
The fix is being worked on in bug 1623988
|
|
||
Comment 2•4 years ago
|
||
The fix for bug 1623988 landed in Firefox Nightly 78. Inspecting nodes on YouTube.com should be substantially faster.
Thanks for the original investigation, nyanpasu64!
Description
•