UIのようなクライアント側のインタラクティブなデータグリッドでは、どのような技術が利用できますか？

私は現在、HTML、CSS、およびJavaScript（カスタムおよびJQuery）を使用して非常にインタラクティブなデータグリッドコントロールを開発しているプロジェクトに取り組んでいます。これはハイエンドのクライアントマシンでは問題ないと思われますが、顧客が受信したデータのレンダリングに非常に時間がかかるという不満があります。UIのようなクライアント側のインタラクティブなデータグリッドでは、どのような技術が利用できますか？

3ギガRAMと3 GHzプロセッサを搭載したwin2k3サーバー上で実行されているほぼすべてのメインストリームブラウザでは、通常、ページがロードされてレンダリングされていることに気がつきましたが、お客様の計算時間は最大25秒です。

私の質問は、ユーザーがデータテーブル内の使用可能な列を動的に選択してクライアントを渡すことができるようなインタラクティブなデータグリッドを持つページのレンダリングを高速化するために、サイドイベント（javascript呼び出し）を同じページの他のフラッシュコンテンツに追加します。前もって感謝します。

出典

2011-10-28 SalmanQ

あまりにも多くのデータ（低速接続）または多すぎるロジック（遅いコンピュータ）のために遅いですか？ – SLaks

@SLaksは '受信データをレンダリングする 'ので、私はbと仮定します。 – Andrew

@SLaksはい、JavaScriptのロジックのようです。ほとんどの場合、属性のjQueryセレクタを使用していくつかの列を非表示にするforループ（つまり、列のc）の（{ var selectorClass = "selector_" + columns [c]; $（ "[colClass = 'class_header_" +カラム[c] + "']"）。hide（）; $（ "[colClass = 'class_data_" +カラム[c] + "']"）。hide（）; } ブラウザに他のサードパーティのプラグインを使用せずに、javascriptよりも高速な技術を使用することが可能かどうかを教えてください。 – SalmanQ

jqGridはこのための私のgotoです。開発者は巨大なデータセットに対して最適化するために多くの時間を費やしました。

出典

2011-10-28 14:23:45 Andrew

私はこのためにDataTablesを使用しますが、パフォーマンスの利点の大部分は、データを処理するMySQLデータベースを持つサーバー側に大量のタスク（並べ替え、フィルタリング）を委任することです。クライアント側では、一度にX個のレコード（200個以下）しか受け取ることができません。これは、ほとんどのマシンが処理するのに些細な量です。

言い換えれば、そのパフォーマンスはページ内の何千ものレコードに似ているのかどうかはわかりませんが、サイトのフォーラム投稿に基づいて、何百ものレコードを点滅させずに処理するようです。

私は別の質問を提起します：あなたはクライアント側で完全なデータセットを持っていて、それをクライアントでソート/フィルタリングしますか？ DataTableを使用する場合と使用しない場合とでは、おそらくサーバーが多大な負荷をかけることになります。既存のプラグインまたは独自のカスタムコードを使用すると、Ajaxとデータ交換フォーマット（JSONは明白な選択肢です）を活用すれば、これを容易にすることができます。

まだ準備が整っていませんが、jQuery UI Gridを見据えておく価値があります。チームからの最近のブログ記事：http://blog.jqueryui.com/2011/10/state-of-the-jquery-ui-grid/

出典

2011-10-28 14:30:36

Gregに感謝します。実際、これらのダイナミックデータグリッドは、わずか40〜45列の5〜12行しか表示していません（表示する必要があります）。すべての列はサーバーによってテーブルにロードされ、JavaScriptを使用してクライアント側で大部分を非表示にし、最も関連性の高いものをいくつか表示します。この隠蔽活動は、遅いマシンでのレンダリング中にほとんどの時間を費やしているようです。 – SalmanQ

これはわずかな量のデータです！たとえ何があっても非効率的ではないかと推測することはできませんでしたが、古いマシンでさえ、25秒の処理が私には衝撃的です。他のオプションをテストすることは幸いです。おそらく、DataTableのjqGridが必要なものを提供します。 –

@SalmanQ、ネイティブCSSを使用して無関係なエントリを表示/非表示にしてください（例：css-classを追加するなど）。また、show/hidingプロセスをブラウザのanimationFrameと同期させてみてください（requestAnimationFrameやsthと同様に） –

UIのようなクライアント側のインタラクティブなデータグリッドでは、どのような技術が利用できますか？

答えて

関連する問題