Hovering the screenshot track can be slow

[mstange]

STR:

1. Load http://bit.ly/2DQ4wwy
2. Move the mouse back and forth inside the screenshot track.

Expected results:
The page should update at 60fps and the screenshot should follow your cursor closely.

Actual results:
The frame rate is more like 20fps, and most of it is due to too much JS execution in perf.html.

Profile: http://bit.ly/2DNJajw

[julienw]

This is the react code updating the Screenshots component while moving the mouse. The problem is that the strip and the hover preview are both in the same component, so moving the mouse also rerender the full strip.

The solution (or part of the solution) would be to split this in 2 separate pure components:
https://github.com/devtools-html/perf.html/blob/68c36b3ef032598afc969f436da2e53108d66316/src/components/timeline/TrackScreenshots.js#L224-L225

Because the screenshot strip doesn't need the props that change as a result of the mousemove, it shouldn't rerender.

[Rohanhacker]

/claim

[Rohanhacker]

I'd like to take this up

[julienw]

@Rohanhacker sure, please do! I added the label assigned to reflect that the issue isn't available anymore. You can find some basic information in our contributing documentation but feel free to ask here or on Slack if you need anything!