GWT FlexTable 性能和优化

Question

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

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

会不会更好

改用网格

切换到 CellTable (但是如何进行单个单元格更新)？

使用 JS/JSNI 处理 DOM 而不是 FlexTable setText()

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

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

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

Answer 1

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

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

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