search

tbranyen / hyperlist

A performant virtual scrolling list utility capable of rendering millions of rows
Other
448 stars 45 forks source link

Stability issues when using Hyperlist with a collection of complex DOM elements #43

Open Zazzzles opened 6 years ago

Zazzzles commented 6 years ago

Just want to preface this by saying that i love the idea of this plugin. it works very well with simple DOM elements and text but I am running into serious performance issues when trying to render a collection of complex dom elements with this script.

Is there any optimization I can do on my side to potentially improve performance? Thanks!

tbranyen commented 6 years ago

@Zazzzles I've noticed this as well and I believe it's due to the naive overscan implemented. If you are able to show 5k rows in your viewport, it will attempt to load significantly more like 10-15k. This should definitely be configurable.

nevf commented 6 years ago

My take is the main issue here is Hyperlist uses a recursive requestAnimationFrame() -> render() call which tests the current scroll position. This loads a large number of elements unnecessarily, because it doesn't throttle. It would be way better to use the onScroll event with throttling.  This would also remove the recursive call which I really don't like. My 2c.

redfellow commented 1 year ago

I was able to make this easier on the CPU with this small tweak (any debounce library / helper function would work, I've got the jQuery one since this is a legacy project):

    // allow recursive function to trigger every 250ms only
    // _this._renderAnimationFrame = window.requestAnimationFrame(render);
    var _debounceRender = jq.debounce(250, function() {
        _this._renderAnimationFrame = window.requestAnimationFrame(render);
    });
    _debounceRender();