GWT - 大表在 IE7/8 上加载缓慢答案

【问题标题】：GWT - Big tables load slow on IE7/8GWT - 大表在 IE7/8 上加载缓慢
【发布时间】：2011-01-24 21:40:17
【问题描述】：

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

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

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

【问题讨论】：

标签： internet-explorer gwt pagination flextable

【解决方案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。您可以通过其他样式控制特定列中单元格的宽度。

例如

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

这也使得修复标题/可滚动内容等操作变得更加容易，因为您可以使用溢出滚动条将正文指定为特定高度。 this 之类的网站可能会为您提供可以使用的布局/样式的想法。

如果您不需要它们，其他优化将是不使用小部件来表示单元格。如果您需要添加事件处理程序等，小部件最有用，如果您不需要，则只需通过 innerHtml / Text 属性注入文本或 html 的 sn-ps。它减轻了内存占用并加快了事件处理速度。

【讨论】：

【解决方案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

（它实际上可能适用于排序，我只是还没弄清楚如何）

【讨论】：