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

[Zazzzles]

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]

@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]

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]

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();