一度に何千ものデータをフェッチするときに DOM をレンダリングするにはどうすればよいですか?

Question

リーリー

これは、firebug によって測定された時間です。8.3 ミリ秒はグループで追加され (方法 1)、5.74 ミリ秒は直接追加されます (方法 2)

個人的には、グループ化は次のように考えています。これで dom レンダリングが減ってラグもなくなるのですが、firebug で計測した結果が私の考えと違っていて、データが小さすぎるためでしょうか？

Answer 1

実際、グループ化では実際にプレッシャーを共有することはできません。タイマーを追加してタイムシェアリング機能を使用する必要があります。

例は、WebQQ の QQ フレンド リストの作成です。通常、リストには数百または数千の友人が含まれており、友人がノードで表されている場合、ページ上にリストをレンダリングするときに、ページ内に一度に数百または数千のノードを作成する必要がある場合があります。

短期間に多数の DOM ノードをページに追加すると、明らかにブラウザに負荷がかかり、
ブラウザのアニメーションが途切れたり、一時停止したりすることがあります。コードは次のとおりです:
リーリー この問題に対する解決策の 1 つは、次の timeChunk 関数です。timeChunk 関数を使用すると、たとえば、1 秒で 1000 個のノードを作成する代わりに、200 ミリ秒ごとに 8 個のノードを作成できます。
リーリー
上記は書籍「デザインパターン」からの抜粋です

Answer 2

あなたのソリューションが遅い理由は次のとおりです。
$('.list').append(html);
このコードがループするたびに、dom 要素、つまり $('.list' の位置を変更する必要があります。 )jquery .list ドキュメントを取得する必要があります。これは N 回ループして配置するのと同じです。これはもちろん非効率です。そのため、2 番目のオプションは 1 回だけ配置し、すべての要素をそれに追加します。明らかに効率的です。 . 配列のシャーディングは js にまったく反映されません。ただし、JS 自体のシャーディングの手順が 1 つ増えても効率は向上しません。分割しても効率は同じです

Answer 3

一度に何千ものデータを取得することは、API 設計に何か問題があることを示しています。

Answer 4

個人的には、最初の方法はより多くのメモリと時間を消費すると思います (ボリュームが小さい場合)。まず、上記のステートメントは合計され、より多くの回数実行されます。次に、複数回追加するのは、一度に追加するよりも優れていません。

Answer 5

一度に取得した数千のデータは、すべて一度に追加されるわけではありません。

合理的なアプローチは、ディスプレイの重要性と二次性に応じてロードすることです。最初に表示されているものをロードし、プロセスがアイドル状態のときに残りをバッチでページに挿入します。