Closed Bug 1392869 Opened 3 years ago Closed 1 year ago

Loading new scripts is slow when the dev tools debugger pane is open

Categories

(DevTools :: Debugger, defect, P2)

57 Branch
defect

Tracking

(firefox57 fix-optional)

RESOLVED FIXED
Tracking Status
firefox57 --- fix-optional

People

(Reporter: jwmerrill, Unassigned)

References

(Blocks 1 open bug)

Details

(Keywords: perf)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20170822142709

Steps to reproduce:

Open the debugger pane in the developer tools, and load a page that asynchronously loads many scripts. This is common behavior when developing with requirejs and running unoptimized, since in this case, requirejs dynamically creates new script tags to load dependencies.

I have created a benchmark to demonstrate this issue:

https://github.com/jwmerrill/async-script-load-benchmark


Actual results:

Having the debugger pane open makes asynchronously loading additional scripts much slower. Note that the problem also appears if you have the dev tools open and you have ever visited the debugger panel. It does not need to be the currently active panel, you just need to have activated it at some point during your session.

In Firefox 57 (currently nightly), loading 1000 files in this tool takes 1 second with dev tools closed, and 11 seconds with dev tools open to the debugger pane. Loading 2000 files takes 2 seconds with dev tools closed, and 30 seconds with the debugger open. Loading 5000 files takes 6 seconds with dev tools closed, and 2.5 minutes with the debugger open. In all cases, the branching factor was set to 2.

The problem seems to be worse in Firefox 55 and Firefox 56.


Expected results:

Loading scripts with the debugger open should be fast, and the amount of time that it takes to load each new script should not increase with the number of scripts you have already loaded (the benchmark shows superlinear scaling with the number of scripts you attempt to load).

Chrome takes a similar amount of time to run the benchmark with dev tools closed, but opening dev tools only slows things down by 20-40% instead of a factor of 10 or more.
This is a reduced test case based on my experience working on acceptance tests for https://www.desmos.com/

In our acceptance tests, we navigate to a series of pages in an iframe, which means many many scripts are loaded over time.

When diagnosing failing tests, it's useful to run without optimizing scripts into a single file so that the relationship to source files is simpler. As the size of the test suite has grown, running these tests with the debugger open in Firefox has become unusably slow.
Component: Untriaged → Developer Tools: Debugger
Keywords: perf
+1. This happens all the time when I switched to Firefox Nightly. Although it does happen in Firefox 54 too, I thought that given the performance improvements gained by the browser in general, I'd give developing in Firefox a shot again. The DOM Inspector and Debugger tabs cause the whole Dev tools to get stuck for about a minute when first loading a page.

Also, if a breakpoint is enabled in the debugger, then reloading the page is impossible (even when the breakpoint is not hit). The Dev tools also get stuck in such a scenario, but it does respond to F12, which I can use to close the Dev tools. After doing this, the browser can reload the page.
Also, if I have Fx 57 running and have a tab open with Dev tools enabled, and then I put my laptop to sleep and resume later, then the tab stops responding. I just a spinner on a light-grey background, with the area for Dev tools in white. Reloading the tab also doesn't work.

See a screenshot here:
https://i.imgur.com/GONzlnY.png
After playing around with Nightly, I have seen these things:

1. When the debugger tab is open in Dev tools, the page doesn't reload at all, and the whole browser starts slowing down and doesn't even respond to clicking the close button. But, if I press F12, the Dev tools window does get closed and suddenly the whole browser starts running smoothly.
2. This behaviour doesn't happen if some other tab in Dev Tools is open, only with the Debugger tab.
3. Setting breakpoints in Dev Tools further slows down JS execution and starts hanging the browser.
Priority: -- → P2
Hi, we're working this here (https://github.com/devtools-html/debugger.html/issues/3736). It's one of our top goals and I think we'll have some fixes in nightly next week.

Thank you for the clear STR and indicators.
I have a similar problem with developing in Firefox. With devtools open Firefox is ~10x slower than Chrome on the same app (using different OS and versions).

With around 1673 requests (majority .js files) and 5MB transferred:

*) Windows 10 VM (1 cpu/2GB RAM)

- Firefox v57.0             7.5 minutes
- Chrome  v62.0              24 seconds

*) OSX Mac Mini

- Firefox v55.0.3            52 seconds
- Chrome  v61.0               7 seconds


It makes it nearly impossible to develop with firefox in comparison to other browsers.
 
*) I haven't made a minimal reproduction case but could try if requested

*) I could add screenshots or other information if it helps
(In reply to thirdpartybugs from comment #6)
> I have a similar problem with developing in Firefox. With devtools open
> Firefox is ~10x slower than Chrome on the same app (using different OS and
> versions).
> 
> With around 1673 requests (majority .js files) and 5MB transferred:
> 
> *) Windows 10 VM (1 cpu/2GB RAM)
> 
> - Firefox v57.0             7.5 minutes
> - Chrome  v62.0              24 seconds
> 
> *) OSX Mac Mini
> 
> - Firefox v55.0.3            52 seconds
> - Chrome  v61.0               7 seconds
> 
> 
> It makes it nearly impossible to develop with firefox in comparison to other
> browsers.
>  
> *) I haven't made a minimal reproduction case but could try if requested
> 
> *) I could add screenshots or other information if it helps

I could add a saved performance profile for the win10 FF v57 session, its ~1.1M compressed
Product: Firefox → DevTools
Looks like the delazify work brought this down to not perceivable: https://perfht.ml/2P6aiNl . Debugger stays buttery smooth while folders and scripts are being added. Overall times is around 13s in Chrome and Firefox.

Please re-open if this persists in your testing.
Status: UNCONFIRMED → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.