GWT -IE7/8で大きなテーブルのロードが遅い

StackOverflow https://stackoverflow.com/questions/4787480

質問

私はページネーションのないテーブルを手に入れたので、すべてのレコードをScrollbarを使用して1つの大きなフローに表示する必要があります。同じためにフレックステーブルを使用します。

Firefoxにはページの読み込みに大きな問題があり、約90秒で7000のレコードを読み込みます。しかし、IEは単に800のレコードでハングアップします！

私たちの技術アーキテクトは、本格的なウィジェットの代わりにInnerHTMLを使用してCellTableウィジェットを使用することをお勧めします。

役に立ちましたか？

解決

GWTのグリッドとflextableは、標準のHTMLtableから派生しています。基本的に、テーブルの列を挿入するたびに、つまりテーブル全体を反射しようとするので、テーブルが長くなるほど、リフローが長くなります。したがって、パフォーマンスは大きなグリッドではひどいです。

Div要素とスタイリングを使用して、テーブル、列、セルに似ている方が良いかもしれません。 

<div class="ftable">
  <div class="ftbody">
    <div class="frow">
      <div class="fcell cell0">Hello</div>
      <div class="fcell cell1">World</div>
    </div>
  </div>
</div>

新しいセルを挿入しても、他のセルdivが反射しないため、より速くなります。

セルはインラインDivであるため、左に浮かんでいます。行とテーブル /セクションは、通常のブロックDivです。追加のスタイリングを通じて、特定の列のセルの幅を制御します。

例えば

.ftbody {overflow-y:scroll; overflow-x:hidden; height: 120px; }
.fcell { display: inline; }
.cell0 { width: 80px; }
.cell1 { width: 120px; }

これにより、オーバーフロースクロールバーのある特定の高さにボディを指定できるため、ヘッダー /スクロール可能なコンテンツを修正するなどのことが簡単になります。などのサイト これ 使用できるレイアウト /スタイルのアイデアを提供する場合があります。

その他の最適化は、セルを必要としない場合、セルを表すウィジェットを使用しないことです。ウィジェットは、イベントハンドラーなどを追加する必要がある場合に最も便利です。そうでない場合は、innerHTML /テキストプロパティでテキストまたはHTMLのスニペットを挿入するだけです。メモリフットプリントを明るくし、イベントの処理をスピードアップします。

他のヒント

選別要件がない場合は、新しいGWT 2.1.0セルテーブルを使用することをお勧めします。

http://www.jarvana.com/jarvana/view/com/google/gwt/gwt-dev/2.1.0/gwt-dev-2.1.0-javadoc.jar!/com/google/gwt/user/cellview /client/celltable.html

（それは実際にソートで動作するかもしれません、私はまだどのように理解していませんでした）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top