Open Bug 1458899 Opened 2 years ago Updated 6 months ago

Many unnecessary toolbox re-renderings on page reload

Categories

(DevTools :: Framework, enhancement, P2)

enhancement

Tracking

(Not tracked)

People

(Reporter: pbro, Unassigned)

References

(Blocks 1 open bug)

Details

The steps to reproduce this are simple:

- open a new empty page: data:text/html, for example
- open the toolbox
- refresh the page

This is a bug about the time DevTools takes to refresh when the page gets reloaded.
Part of this time seems to be spent re-rendering parts of the toolbox UI and it doesn't seem useful.

Here's what I found by looking at perf.html and by adding some console.log statements here and there:

- On page reload, frameUpdate events are sent from the tabActor.
- The TabTarget class receives them and, in turn, sends frame-update events for each of them.
- I found out that 3 such events are sent: 1 for destroyAll (prior to reloading I guess), and then 2 for the frame update itself. I don't know why there are 2. In my simple test case (empty page), they are identical, they contain the same number of frames (just 1).
- The Toolbox class' _updateFrames function is executed for each of these 3 events, and calls this.component.setToolboxButtons which basically re-renders the ToolboxController React component.
- Now, because it's a React component, the DOM did not actually changed so there's no reflow or repaint here, but still, we're spending the time to execute the whole React render cycle 3 times, for seemingly no reasons.
Severity: normal → enhancement
Priority: -- → P2
(In reply to Patrick Brosset <:pbro> from comment #0)
> - I found out that 3 such events are sent: 1 for destroyAll (prior to
> reloading I guess), and then 2 for the frame update itself. I don't know why
> there are 2. In my simple test case (empty page), they are identical, they
> contain the same number of frames (just 1).

What typically happens is that:
1) destroyAll, cleans up the list of frames,
2) you get a first update for the top frame ASAP, but the URL/title may not be available yet,
3) you get another update once the top frame is done loading and has the final URL/title.

> - The Toolbox class' _updateFrames function is executed for each of these 3
> events, and calls this.component.setToolboxButtons which basically
> re-renders the ToolboxController React component.

The call to setToolboxButtons has been introduced in bug 1451592.
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.