5

我正在研究 GWT 项目，我们使用FlexTable来显示一些数据。我知道我们可能应该使用CellTable，因为它具有更好的性能，但 FlexTable 更容易设置样式（设置特定单元格的样式）并且更容易更新特定单元格。

为了接收我们正在使用 WebSockets 的表的更新。我们现在面临的问题是当每秒有超过 100 次更新通过 WebSockets 时，CPU 负载很高。来自 WebSocket 连接的每条消息都包含表中多个单元格的更新。所以在实践中，每秒应该在 FlexTable 中呈现超过 100 次更新。我的 3GHz i5 和 4GB RAM 的 CPU 负载约为 50%。如果我禁用数据的实际呈现（注释掉 setText() 方法调用），那么 CPU 负载会下降到 5-10%。所以我知道 DOM 更新是瓶颈，而不是代码的其他部分。

会不会更好

  1. 改用网格
  2. 切换到 CellTable （但是如何进行单个单元格更新）？
  3. 使用 JS/JSNI 处理 DOM 而不是 FlexTable setText()

有没有更好的方法来实现表格和提高性能？

如果有人对 FlexTable 有类似的问题，我曾尝试用谷歌搜索，但发现只是普遍认为它很慢，没有什么特别的。我们有纯粹用 JavaScript 完成的应用程序原型，同样每秒 100 次更新，CPU 负载约为 15%

更新
Dropping css 淡入淡出效果，我们用来指示单元格值的变化将 CPU 负载降低了约 10%。所以看来 DOM 并不是唯一的问题。

4

3 回答 3

2

使用 CellTable 您必须重新渲染整个表格才能更新单个单元格。但是，这样的更新将是对 DOM 的一次更新。使用 FlexTable，即使您将所有更新批处理在一起，您也将执行一系列单独的 DOM 操作。因此，即使使用 CellTable 可能看起来效率低下，因为您冗余地更新了一些单元格，但仍然值得切换。 特别是在您更新的单元格数量接近单元格总数的情况下：将 100 次更新一起批处理，然后一次完成一次 DOM 写入。

我有一个带有 CellTable 的应用程序，它可以大到 30x100。它在任意单元格上具有任意样式，每个单元格都有复杂的内容（一个<img>、一些<div>s 和一些文本），有时我需要更新单个单元格。在我的 macbook pro 开发模式下，重绘整个东西是不明显的（以我的人类感知）。

如果您想要实时更新（例如，每秒 100 次更新，当它们发生时），那么我认为您可能想要一个不同的平台。甚至您的显示器也没有每秒刷新 100 次。

于 2011-11-09T15:34:43.833 回答
0

您可以cellTable.redrawRow(index);在大桌子上使用哪个更快。
好消息是行索引由FieldUpdater.

于 2012-10-30T14:49:12.223 回答
0

作为上述所有方法的替代方案（或除此之外，取决于您获得的结果），我会考虑使用一些调度程序方法。特别是 Scheduler.get().scheduleIncremental() 并一次以 10 次为一组进行更新。这将允许浏览器在更新之间处理其他事件，并且应该对 CPU 使用率产生积极影响。

CellTable 在这里根本不会帮助您，因为您无法更新单个单元格。因此，作为替代方案，它只让您使用 Grid 并手动管理 TableElement。

于 2011-11-09T14:29:45.043 回答