ページ上で数十万のDOM要素を処理するにはどうすればよいですか？

Question

私は、ここで仕事をしている科学者のためにタンパク質/ DNA配列アラインメントツールを開発してきました。それは、アライメントファイルの簡単なテーブルビューとして開始されました。だから私はすべてのシーケンスのための内部の文字列と1つのテーブルの行を持っています。しかし、基本的には、コンポーネント自体からアライメントを行うことができるようにするため、シーケンス内のすべての文字が突然スパース要素でなければなりませんでした。

ページのほんの一握りのシーケンスでは、ブラウザは滑らかなままです。しかし、シーケンスの数が約60になると（> 100,000個のDOM要素）、ブラウザが動き始めます。私はスクロールがスムーズでなく、スクロールがこのページで重要な操作であることを意味します。

私の顧客は、何かを管理していましたが、何千ものシーケンスをこのようなものにロードしたいと思うかもしれないと私に通知しました。

私の質問は、どうやってDOM要素の膨大な数を処理するのですか？私はCanvasやFlashなどのDOM以外のソリューションを使用することを考えていましたが、DOMに保持する方法があるかどうかは疑問です。

Answer 1

要素の再利用！各シーケンス文字に対してspanを作成するのではなく、現在のディスプレイに加えて、1ページの上下のバッファを作成します。まず、JavaScript（JS配列など）にデータを格納します。読み込み時に配列から要素の初期セットを読み込みます。次に、要素がページをスクロールしていくうちに、行数分のDOM要素をページの下に移動し、JavaScriptを使用してデータで埋めて再利用します。

ブラウザのスクロールバーの位置を維持する場合は、ページの残りの部分を動的に変更する、適切なサイズの余分なdivのペアを動的に作成します。

Answer 2

要素の別の部分を表示し、スクロールイベントにハンドラを設定し、それが最後または最初の可視要素にいたとき、この要素が、部品のないすべてを表示し、もはや重要であったこと、他のを隠そう（可視性：非表示）