search

germanysbestkeptsecret / Wookmark-jQuery

A jQuery plugin to create a dynamic, multi-column layout.
MIT License
2.63k stars 759 forks source link

Endless scroll performance – detach & keep position? #174

Open mmikkel opened 9 years ago

mmikkel commented 9 years ago

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 commented 9 years ago

I'm very interested in this too.

mmikkel commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

Sweet, thank you @Sebobo!

Sebobo commented 9 years ago

@mmikkel did you try the 2.0?

zilions commented 8 years ago

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

zilions commented 8 years ago

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 commented 6 years ago

Any update on this?