6

一度に大量のテーブル行要素を追加していて、大きなボトルネックが発生しています。現時点では jQuery を使用していますが、仕事が終われば JavaScript ベースのソリューションを受け入れます。

特定の時間に 0 ～ 100 のテーブル行を追加する必要があります (実際にはそれ以上になる可能性がありますが、100 を超えるものはすべてページ付けします)。

現在、各テーブル行を個別にdomに追加しています...

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

それから私はそれらすべてを一度にフェードインします

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

ここで考慮すべき点がいくつかあります...

1）個々のテーブル行にデータをバインドしているため、最初に一括追加から個々の行の追加に切り替えました。

2) フェード効果がとても気に入っています。アプリケーションに必須ではありませんが、私は美学とアニメーションが大好きです (もちろん、アプリケーションの使用を妨げるものではありません)。適度なフェード効果を大量のデータに適用する良い方法が必要です。

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

影響/dom操作を再帰関数の大きなチャンクまたは小さなチャンクに適用する方が良いですか?

どちらか一方を実行する方がよい状況はありますか? もしそうなら、適切な方法を選択するための指標は何ですか?

4

2 に答える 2

3

John Resig によるこの投稿を見てください。DOMに大規模な追加を行うときに DocumentFragments を使用する利点が説明されています。

DocumentFragment は、DOM を実際に変更することなくノードを追加できるコンテナーです。準備が整ったら、フラグメント全体を DOM に追加します。これにより、1 回の操作でそのコンテンツが DOM に配置されます。

また、繰り返しごと$("#myTable")に実行することはお勧めできません。ループの前に1 回実行してください。

于 2010-12-20T18:29:05.580 に答える
2

ループ内でDOMを複数回変更しているため、パフォーマンスの問題が発生していると思われます。

代わりに、すべての行を取得した後で一度変更してみてください。ブラウザーは、innerHTML の置換が得意です。次のようなものを試してください

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

DOM を正しい場所に配置するには、使用する正確なセレクターをいじる必要があるかもしれないことに注意してください。しかし、主な考え方は、innerHTML を使用し、使用回数をできるだけ少なくすることです。

于 2010-12-20T17:44:35.897 に答える