CB-5703 refactor: optimize data grid onScroll handler #3071
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
handleScroll in DataGrid entails small performance degradation due to el.scrollTop, el.clientHeight, el.scrollHeight calls and hence reflow of layout, more on that here: https://gist.github.com/paulirish/5d52fb081b3570c81e3a/565c05680b27c9cfd9f5e971d295cd558c3e1843 What is done: 1. throttle added to not fire handleScroll on every render, because the main goal of that function is to detect when a user approaches the end of a page = reduce number of calls 2. Inside the handler the code was refactored in a way that we get scrollTop only once to calculate toBottom and inverse the clause logic and replace early return (!A || !B) with a clause with (A && B) logic to not check B on every call which is also triggering reflow.
devnaumov
approved these changes
Nov 20, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
handleScroll in DataGrid entails small performance degradation due to el.scrollTop, el.clientHeight, el.scrollHeight calls and hence reflow of layout, more on that here: https://gist.github.com/paulirish/5d52fb081b3570c81e3a/565c05680b27c9cfd9f5e971d295cd558c3e1843
What is done:
throttle added to not fire handleScroll on every render, because the main goal of that function is to detect when a user approaches the end of a page = reduce number of calls
Inside the handler the code was refactored in a way that we get scrollTop only once to calculate toBottom and inverse the clause logic and replace early return (!A || !B) with a clause with (A && B) logic to not check B on every call which is also triggering reflow.