Endless scroll performance – detach & keep position?

[mmikkel]

Hi,

I'm battling an issue with endless scrolling and performance. When the container reaches a certain height (around 55k px on my computer which is a fairly powerful one, so I'd assume earlier on a weaker device) the FPS begins to drop significantly, to the point where its almost impossible to scroll any further.

Obviously this is not a Wookmark specific issue – in general I'm awed by Wookmarks great performance – there are just too many elements in the DOM. Even Wookmarks endless scroll demo gets into troubled waters around the 88k px mark.

Pinterest actually solves this very issue by dynamically detaching and re-attaching any elements that fall out of bounds, but I'm having trouble implementing a similar fix –

Figuring out which elements are safely outside the viewport bounds isn't difficult – problem is, I can't figure out how to maintain the visible Wookmark items' position whenever stuff is removed from (or appended to) the DOM. Ideally, if I removed the first 50 elements in the grid, I'd want the next 50 (that are currently visible) to maintain their relative position – as if the first 50 were still there. Is this even possible with Wookmark?

If anybody has any light to shed on the subject – that'd be great :)

[darrensw]

I'm very interested in this too.

[mmikkel]

I have a few ideas on how to implement it, but I'm going to look at Pinterest's implementation first. If I manage to incorporate something like it in Wookmark and its half-way decent I'll share it here :)

[Sebobo]

Hi,

interesting topic.
I’m currently working on the 2.0 release in the no-jquery branch.
This could also be something which could fit in the release, as I am doing a lot of speed improvements and refactoring. Making the „layout“ function only look for new elements and ignoring the old ones should help with this issue. It only breaks when the whole layout is triggered.

[darrensw]

Sounds good - I'm also interested in a non JQuery version as I'm slowly moving away from it - it's great but sometimes native is just as many lines without the library read which can only speed up any app

[Sebobo]

I just release v2. And it should be much faster.
I haven't implemented the "only-visible" layouting but still it should help.
Will move this to 2.1

[mmikkel]

Sweet, thank you @Sebobo!

[Sebobo]

@mmikkel did you try the 2.0?

[zilions]

Very interested in this too. My web application supports endless scrolling, and on mobile devices it starts bugging out after a while...

[zilions]

Might be a good start, but Angular Grid just implemented "performance scroll" - https://github.com/s-yadav/angulargrid

Added agPerformantScroll options, if enabled non visible element (from viewport) will be removed, and there watchers will be disabled.

If I get the time, I might check their logic and see if I can implement it into Wookmark.

[shubham-gupta-xelp]

Any update on this?