1458899 - Many unnecessary toolbox re-renderings on page reload

Status: NEW

(DevTools :: Framework, enhancement, P2)

Description

[Patrick Brosset <:pbro>]

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.

Comment 1

[Alexandre Poirot [:ochameau]]

(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.