GWT FlexTable performance and optimization

Question

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

1. use Grid instead
2. switch to CellTable (but how to make singe cell updates then)?
3. 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.

Answer 1

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.

Answer 2

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.

Answer 3

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.