[Performance] Always render a consistent number of elements #112
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.
TLDR: this modification improves performance when an ember-collection is scrolled for the first time after being rendered.
Forgive my loose terminology below - let me know if I am not making sense.
Assume a browser displays a vertically scrolling
ember-collection
that has 20 elements on screen and has a buffer value set to 5. Currently, when this collection first renders, it will "initial-render" 20 elements on screen and an additional 5 elements off the bottom of the screen. As soon as the user scrolls 5 elements down, it will have to "initial-render" an additional 5 elements off the top of the screen. The other 25 elements that are already rendered will be "recycle-rendered" which is much faster. The rendering of these 5 new elements can result in noticeable lag when the user first scrolls in a collection consisting of complex applications.This PR changes the behaviour so initial 20 elements are rendered on screen and 10 are rendered off the bottom of the screen. As you scroll down the 10 elements off the bottom of the screen reduce down to 5 and 5 elements are moved off the top off the screen. So there will consistently be 30 elements rendered at all times.
In my use case, "initial render" of an element takes about ~20ms whereas "recycle-render" takes about ~3ms. That 5 x ~20ms when scrolling results in choppy scrolling. Scrolling is much smoother with this change in place. I'm not really sure how I can quantify this more empirically.
I am submitting this for feedback before I do the work to fix the broken unit tests. If there is support I will go ahead and get it ready for merge. It may also make sense to implement the corresponding behaviour when starting at the end of the collection - though obviously this is more of an edge case.