GWT - IE7/8上的大表加載緩慢

Question

我得到了一個沒有分頁的表，因此所有記錄都需要用滾動條顯示在一個大流中。使用Flex表格相同。

Firefox在加載頁面時沒有大問題，它在大約90秒內加載7000條記錄。但IE只是掛着800條記錄！

我們的技術架構師建議使用celltable widget而不是完整的widget。

Answer 1

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屬性注入文本或html片段，則小部件最有用。它減輕了內存佔用並加快了事件處理速度。

Answer 2

如果你沒有任何排序要求，我會建議使用新的GWT 2.1.0 CellTable，這應該是足夠快：

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

（它實際上可能與分揀作業中，我只是還沒有想出如何）