0

作成中のウィジェットにアイテムをレンダリングする際に問題があります。これが私がやっている方法です：

  1. サーバーからIDのリストを取得します（実際のデータはなく、IDといくつかのメタデータのみ）。
  2. アイテムのリストをループし（平均で 90 ～ 10 個のアイテムがあります）、 panel.items.add({html: 'some place holder div with id'}) を使用してアイテムを追加します
  3. ID をループし、サーバーに非同期呼び出しを行って実際のデータを取得し、グラフを作成して適切なプレースホルダー ID 内にレンダリングします。

ステップ 3、驚くことに、最も多くのデータをロードするステップであるにも関わらず、正常に動作します

ステップ #1 は非常に高速です。単一のサーバー呼び出しを使用して、サーバーから ID のリストを取得するだけです。

ステップ＃2が問題です。これは、より明確にするためのコードのスニペットです。

for (var i=0; i<meta.length; i++) {
   var item = meta[i];
   var divId = "graph" + meta.id  + ..etc;
   panel.items.add({ 
      html: me.getDivHTML(divId, meta, ...);
   });
}

これには 2 つの問題があります。1 つ目は、画面に 90 div をレンダリングするのに 1 分以上かかることです。2 つ目は、段階的にレンダリングされず、レンダリングが完了するまで待機し、すべての div を一度に表示します。

私はクロムを使用しています。私は何を間違っていますか？これらの div のレンダリングを高速化するにはどうすればよいですか?

4

2 に答える 2

1

javascriptがシングルスレッドであることから、奇妙なことが起こっているようです。90 個の項目を追加することはおそらく問題ではありませんが、ajax 要求からのコールバックによるスレッドの絶え間ないロックにより、状況が少し奇妙になります。私は2つのことのうちの1つをします。

  1. できれば、これらすべての ID を送信して、90 個の div に必要なすべての情報の配列を取得できる関数をサーバー上に作成してください。そうすれば、すべての div を含む単一の Ext.container.Container を追加できます。それが一番うまくいくと思います。私は常に、Web サービスにオプションの「IN」パラメーターを与えます。これにより、SQL の「IN」ステートメントに変換される値の配列とペアになったフィールド名を持つオブジェクトを渡すことができます。このような場面でとても重宝します。

  2. それが絶対に不可能な場合は、レンダリングの前にすべての情報を配列に構築するか、配置先のコンテナーでレイアウトを一時停止してから、完了したら doLayout を呼び出します。ここで構成とドキュメントを参照してください

于 2013-11-12T19:22:49.413 に答える