GWT FlexTable 性能和优化
我正在开发 GWT 项目，我们正在使用 FlexTable 来显示一些数据。我知道我们可能应该使用 CellTable 因为它具有更好的性能，但 FlexTable 更容易设置样式（设置特定单元格的样式），并且更容易更新特定单元格。
为了接收表的更新，我们使用 WebSockets。我们现在面临的问题是，当每秒通过 WebSocket 进行的更新超过 100 次时，CPU 负载很高。来自 WebSocket 连接的每条消息都包含表中多个单元格的更新。因此，实际上，FlexTable 中每秒应呈现超过 100 次更新。我的 3GHz i5 和 4GB RAM 上的 CPU 负载约为 50%。如果我禁用数据的实际渲染（注释掉 setText() 方法调用），则 CPU 负载会下降到 5-10%。所以我知道 DOM 更新是瓶颈，而不是代码的其他部分。
切换到 CellTable会更好吗
- 使用 Grid 代替
- （但是如何进行单个单元格更新）？
- 使用 JS/JSNI 来处理 DOM 而不是 FlexTable setText()
有更好的方法来实现 table 并提高性能吗？
我尝试用谷歌搜索是否有人对 FlexTable 有类似的问题，但只发现一般认为它只是慢，没有什么具体的。我们的应用程序原型纯粹用 JavaScript 完成，每秒更新 100 次，CPU 负载约为 15%
更新
删除用于指示单元格值变化的 css 淡入淡出效果可将 CPU 负载减少约 10%。所以看来 DOM 并不是唯一的问题。
I'm working on GWT project where we are using FlexTable to display some data. I know that we should probably be using CellTable as it has better performance, but FlexTable is easier to style (style specific cells) and makes it easier to update specific cell.
To receive updates for the table we're using WebSockets. The problem we're facing right now is high CPU load when there're more than 100 updates per second coming through WebSockets. Each message from WebSocket connection contains updates for several cells in the table. So in practice there're more than 100 updates per second that should be rendered in the FlexTable. CPU load on my 3GHz i5 with 4GB RAM is around 50%. If I disable actual rendering of the data (comment out setText() method calls) then CPU load goes down to 5-10%. So I know that DOM updates are the bottleneck, not the other parts of the code.
Would it be better to
- use Grid instead
- switch to CellTable (but how to make singe cell updates then)?
- use JS/JSNI to work with DOM instead of FlexTable setText()
Are there better ways to implement table and improve performance?
I've tried to google if someone had similar problems with FlexTable, but found only the general opinion that it is just slow, nothing specific. We have application prototype done purely in JavaScript and with same 100 updates per second CPU load is around 15%
Update
Dropping css fade effect which we used to indicate change in the cell value reduced CPU load by ~10%. So it seems that the DOM is not the only problem.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
使用 CellTable，您必须重新渲染整个表格才能更新单个单元格。然而，这样的更新将是对 DOM 的单个更新。使用 FlexTable，即使您将所有更新一起批处理，您也将执行一系列单独的 DOM 操作。因此，尽管使用 CellTable 看起来效率很低，因为您冗余地更新了一些单元格，但可能仍然值得进行切换。 尤其在您更新的单元格数量接近单元格总数的情况下：批量进行 100 次更新，并在一次 DOM 写入中一次性完成所有更新。
我有一个带有 CellTable 的应用程序，其大小可以达到 30x100。它在任意单元格上有任意样式，每个单元格都有复杂的内容（一个
![]()
和一些文本），有时我需要更新单个单元格。在我的 macbook pro 的开发模式下，重绘整个东西是不明显的（以我的人类感知）。如果您想要实时更新（例如每秒 100 次更新，当它们发生时）那么我认为您可能需要一个不同的平台。甚至你的显示器每秒刷新率也达不到 100 次。
With a CellTable you have to re-render the entire table to update a single cell. However, such an update would be a single update to the DOM. With a FlexTable, even if you batch all of your updates together, you'll be doing a bunch of separate DOM manipulations. So, even though it might seem inefficient to use a CellTable because you update some cells redundantly, it may still be worth it to switch. Especially in the case where you're updating a number of cells close to the total number of cells: batch 100 updates together and do them all at once for a single DOM write.
I have an app with a CellTable that can be as large as 30x100. It has arbitrary styles on arbitrary cells, each cell has complex contents (an
<img>, some<div>s, and some text) and sometimes I need to update a single cell. Redrawing the whole thing is unnoticeable (to my human perceptions) on my macbook pro in development mode.If you want live updates (e.g. 100 updates per second, as they happen) then I think you might want a different platform. Not even your monitor is refreshing 100 times per second.
作为上述所有方法的替代方案（或补充，取决于您获得的结果），我将考虑使用一些调度程序方法。特别是 Scheduler.get().scheduleIncremental() 并批量更新，例如一次 10 个。这将允许浏览器在更新之间处理其他事件，并对 CPU 使用率产生积极影响。
CellTable 在这里根本不会帮助您，因为您无法更新单个单元格。因此，作为替代方案，您只需使用 Grid 并手动管理 TableElement。
As an alternative (or in addition to, depending on what results you get) to all of the above I would look into using some of the Scheduler methods. Especially Scheduler.get().scheduleIncremental() and do updates in batches of say 10 at a time. This will allow the browser to process other events in between updates and should have a positive effect on the CPU usage.
CellTable is not going to help you at all here because you cannot update individual cells. So as an alternative it leaves you only the Grid and manually managing a TableElement.
您可以使用
cellTable.redrawRow(index);这在大表上速度更快。好处是行索引由 FieldUpdater 给出。
You can use
cellTable.redrawRow(index);which is faster on big tables.The good thing is that the row index is given by the
FieldUpdater.