大きな要素/データセットをDOMに追加するためのパフォーマンス

Question

一度に大量のテーブル行要素を追加しており、大きなボトルネックが発生しています。現時点ではjQueryを使用していますが、仕事が終わったらjavascriptベースのソリューションを公開しています。

特定の時間に0〜100のテーブル行を追加する必要があります（実際にはそれ以上の可能性がありますが、100を超えるものはすべて改ページします）。今、私は... DOMに個別

loop { 
    ..build html str... 
    $("#myTable").append(row); 
} 

を各テーブルの行を追加しています

その後、私はそれらすべてをフェードを一度

$("#myTable tr").fadeIn(); 

ここで考慮すべきカップルの事があります。 ..

1）私は個々のテーブル行にデータをバインドしています。これは、大量追加から最初の行を追加するように変更した理由です。

2）私はフェード効果が本当に好きです。アプリケーションには必須ではありませんが、私は美しさやアニメーションには非常に魅力的です（もちろん、アプリケーションの使用を気にしないでください）。大量のデータに適度なフェード効果を適用するには、単に良い方法が必要です。

（編集） 3）私は小さいチャンク/再帰的な方法でこれを近づくための主な理由は、私が各行に特定のデータをバインドする必要があります。データを間違ってバインドしていますか？このデータをそれぞれのtrにバインドするよりも良い方法はありますか？

---

は、それが影響/ DOM操作を再帰関数での大きな塊または小さなチャンクに適用した方が良いですか？

どちらか一方の方が良いことがありますか？そうであれば、適切な方法を選択するための指標は何ですか？

Answer 1

このpost by John Resigを見ると、DOMに大きな追加を行う際にDocumentFragmentsを使用する利点が説明されています。

DocumentFragmentは、DOMを実際に変更することなくノードを追加できるコンテナです。準備ができたら、フラグメント全体をDOMに追加します。これにより、DOMにコンテンツが1回の操作で配置されます。 上$("#myTable")各反復は本当にお勧めしませんがやっても

は、 - それはループ前一度行います。

Answer 2

ループ内でDOMを複数回修正しているために、パフォーマンスの問題が発生している可能性があります。

代わりに、すべての行を取得した後で1回修正してください。ブラウザはinnerHTMLの代わりに本当に良いです。

$("#myTable").html("all the rows dom here"); 

注意正しい場所にdomを取得するには、使用する正確なセレクターを使用する必要があります。しかし、主なアイデアは、innerHTMLを使用し、可能な限り数回使用することです。