GWT - IE7/8で大きなテーブルが読み込まれる

ページがないテーブルがあるため、すべてのレコードをスクロールバーで1つの大きなフローで表示する必要があります。 Flexテーブルを使用して同じ。GWT - IE7/8で大きなテーブルが読み込まれる

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

私たちの技術者は本格的なウィジェットではなく、innerhtmlでcelltableウィジェットを使用することをお勧めします。

2011-01-24 frappuccino

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

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; }

これは、あなたがオーバーフロースクロールバーと一定の高さに体を指定することができますので、それが簡単にあまりにも修正ヘッダ/スクロール可能なコンテンツのような事をすることができます。 thisのようなサイトでは、使用できるレイアウトやスタイルのアイデアが得られるかもしれません。

その他の最適化では、必要がない場合にウィジェットを使用してセルを表現することができます。ウィジェットは、イベントハンドラなどを追加する必要がある場合や、innerHtml/Textプロパティでtextまたはhtmlのスニペットを挿入する必要がある場合に最も便利です。メモリの占有面積が小さくなり、イベント処理が高速化されます。あなたが任意の並べ替えの要件を持っていない場合

出典

2011-01-24 21:52:47 locka