Skip to content

Fix Chrome setTimeout throttling #722

@tobiashort

Description

@tobiashort

Hi there.

We have faced a scrolling issue using react-virtualized table with the Chrome browser. After scrolling with the mouse wheel, we experience a quite long time of 1.5 to 2 seconds for which our web application stops responding as we would expect. However this issue does not occur when moving the scroll bar. We also experienced better performance in other browsers, e.g. Firefox.

Performance profiling in Chrome showed us, that after a scroll event the timer does not fire as expected after 150ms (how it is implemented, see DEFAULT_SCROLLING_RESET_TIME_INTERVAL in Grid.js) but after 1.5 seconds or even more.

screenshot-1

We researched for an explanation and found a similar issue explained in this bug report
https://bugs.chromium.org/p/chromium/issues/detail?id=570845

It seems that this is not a bug, but a feature of Chrome.
I followed the advice at the very end of the bug report and replaced the setTimer with requestAnimationFrame and clearTimer with cancelAnimationFrame (see also my fork on https://github.com/uglywizkid/react-virtualized/blob/master/source/Grid/Grid.js ). This seems to result in much better performance.

A fix in your library would be very appreciated

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions