Electronで配置オブジェクトが多くスクロールが重くなるときの対応方法

Question

前提・実現したいこと

Electronに限った話ではないのですが、htmlにてそれぞれ10個程度の小要素を持つオブジェクトを1000個程度配置したところ、ページのスクロールが非常に重くなります。

検討している対応方法

・スクロールで表示されている範囲のみ表示させる(display:blockをつける？)。
・スクロール中は小要素を非表示にして、スクロール完了時にdisplay:blockをつける etc...

備考

スクロール中の動作について詳しく勉強したことがなく、同様の状況で動作を軽くする対処方法を知っている方がいらっしゃったら、雑談感覚で構いませんので書き込みいただければ幸いです。

Answer 1

Electron(Chromium)のバージョンによりけりですが、4年ほど前（chrome44以前）では、スクロール中のマウスイベントを無効化させて、カクつきをなくすという技法がちょくちょく必要でした。
今はchromeもfirefoxもスクロール中はマウス位置の更新イベントを停止しているので、おそらく今回のカクカクとは関係ないと思いますが、雑談回答ということで。

Answer 2

インスタグラムなどにも導入されている、Virtual Scroll とか Virtual List とか呼ばれる技術があります。

npm でライブラリ探せば良いものがあるんじゃないでしょうか。