Question

我有一张没有分页的表格，因此所有记录都需要用滚动条显示在一个大流程中。使用Flex表也是如此。

Firefox在加载页面时没有大问题，它在大约90秒内加载了7000条记录。但IE只挂了800条记录！

我们的技术架构师建议使用带有innerhtml的celltable小部件而不是完整的小部件。

Answer 1

GWT的Grid和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。您可以通过其他样式控制特定列中单元格的宽度。

e.g。

.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

（它实际上可能与排序有关，我还没弄明白怎么样）

GET - IE 7/8上的大表加载速度很慢

2 个答案: