question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Performance issues with Grid.js and scrollTop check

See original GitHub issue

Hi thank you for this library, it’s amazing.

I want to ask what the need of this check?

I have a component which in some situations animate scrollTop property of VirtualScroll component, and even in production I got 30-50ms per frame (I have a lot of lines on the screen).

It’s because check causes reflow. Just removing this line highly (4+ x times) increases performance of my component without lose of any functionality. I got stable 8ms per frame on scroll animation.

I’ve read your comments about autoHeight coupling, and what I want is another boolean property and I know that it’s bad idea.

May be you have any ideas about how to remove this check? Or move all that checks outside control?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:40 (25 by maintainers)

github_iconTop GitHub Comments

2reactions
bvaughncommented, Sep 20, 2016

Don’t you think that onScroll should not be called if scrollTop was changed not by the scroll event?

Unfortunately that used to be how it worked but it caused problems for certain use-cases of scrollToRow / scrollToColumn (see issue #399).

In your case, you could ignore onScroll events with scrollTop values that match your component’s state (or wherever you’re storing the scrollTop prop)?

1reaction
bvaughncommented, Sep 20, 2016

That’s so great to hear!! 👏 😀 Thanks @istarkov!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Scroll to bottom (and forced reflow performance issues)
Try div.scrollTop = div.scrollHeight : var contents = document.querySelector('.contents'); const before = new Date().getTime(); contents.
Read more >
JavaScript Grid: Scrolling Performance
JavaScript Grid : Scrolling Performance · 1. Setting Expectations · 2. Check Cell Renderers · 3. Create Fast Cell Renderers · 4. Turn...
Read more >
Five Fast JavaScript Data Grids — A Performance Review
In this article, we compare the performance of some of the most popular JavaScript grid components on the market, measuring both the initial ......
Read more >
HTML DOM Element scrollTop Property
The number of pixels the element's content is scrolled vertically. If the number is negative, the number is set to 0. If the...
Read more >
Common bugs in React Native ScrollView and how to fix ...
Correctly using onScroll and tracking scroll position may be a tricky task due to performance reasons. This is why it's always important to ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found