tbranyen / hyperlist

A performant virtual scrolling list utility capable of rendering millions of rows

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

Zazzzles opened this issue · comments

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!

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

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.

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