3

AJAX 呼び出しを介してサーバーからファット JSON 配列を取得し、それを処理して Javascript で HTML をレンダリングします。私が望むのは、人間が可能な限り速くすることです。

私のテストでは Chrome が FF より優れていますが、ブラウザが 300 件のレコードをレンダリングするのに 5 ～ 8 秒かかる場合があります。

Google リーダーに実装されているような遅延読み込みを検討しましたが、それは、瞬時に検索結果を取得できるなど、他のユース ケースに反します (JSON 配列で取得したすべてのレコードに対してクライアント側で実行される単純な検索)。および複数のフィルター。

私が気づいたことの 1 つは、FF と Chrome の両方が、JSON 配列内のすべての項目をループするまで何もレンダリングしないことです。ただし、新しく作成された要素をループごとに (HTML があるとすぐに) DOM に明示的に挿入します。私が達成したいのは、ブラウザにできるだけ早くレンダリングさせることです。

私は呼び出しを延期しようとしました（配列のすべてのアイテムは延期された関数によって処理されます）が、実行の順序が保証されなくなったように見えるため、そこで追加の問題に遭遇しました（配列のさらに下のいくつかのアイテムは他のアイテムの前に処理されますそれ以前の項目）。

ここでヒントやヒントを探しています。

4

5 に答える 5

1

一度に 300 件のレコードすべてを表示する必要がない場合は、一度に 30 件または 50 件のレコードをページ分割して、JSON 配列のみをアンロールすることができます。これらのサブパートはページャーまたはローカル検索ボックスを介して表示する必要があるためです。 . 変換が完了すると、ユーザーがページを上下にナビゲートするときにコンテンツをキャッシュして、その後表示することができます。

于 2010-06-29T13:58:01.100 に答える
1

試す：

  • 行を配列にプッシュしてから、単純に

     el.innerHTML = array.join("");

  • ドキュメントフラグメントを使用する 

    var frag = document.createDocumentFragment();
for ( loop ) {
    frag.appendChild( el );
}
parent.appendChild( frag );
于 2010-06-29T17:13:28.133 に答える
0

300はそれほど多くありません。ChromeでjQueryを使用して、JSONからのデータを使用して500を超える要素のツリーをほんの一瞬で作成することができました。300は大きな数字ではありません。

レンダリングが非常に遅い場合は、間違った方法が原因である可能性があります。あなたはそれをどのように行うかを指定できますか？

最も遅い方法は、HTMLをJavascriptの文字列に書き込んでから、innerHtmlメンバーで割り当てることです。しかし、それでも300行の場合は地獄のように高速です。

于 2010-06-29T13:58:23.540 に答える
0

Google Web Toolkitには、大きなテーブルをすばやくレンダリングするように設計されたBulkTableRenderersがあります。GWT を使用しないことを選択した場合でも、Apache ライセンス バージョン 2.0 の下で利用可能なソース コードを調べることで、いくつかの手法を習得できる場合があります。

于 2010-06-29T17:08:14.387 に答える
0

デタッチされた DOM ノードまたはドキュメント フラグメントで要素を作成してから、すべてを一度にアタッチしてみてください。

于 2010-06-29T13:51:57.440 に答える