I am working on a GWT project where we use FlexTable to display some data. I know that we should probably use CellTable as it has better performance, but FlexTable is easier to style (cell style specific) and makes it easier to update a specific cell.
To get updates for the table, we use WebSockets. The problem we are facing right now is the high processor load when over 100 updates per second are available through WebSockets. Each message from the WebSocket connection contains updates for several cells in the table. Thus, in practice, there are more than 100 updates per second that should be displayed in FlexTable. The processor load on my 3GHz i5 with 4 GB of RAM is about 50%. If I turn off the actual data rendering (comment out the calls to the setText () method), then the CPU load is reduced to 5-10%. Therefore, I know that DOM updates are a bottleneck and not other parts of the code.
Would be better
- use grid instead
- switch to CellTable (but how to make cell updates in a cell)?
- use JS / JSNI to work with the DOM instead of FlexTable setText ()
Are there better ways to implement a table and improve performance?
I tried Google if someone had similar problems with FlexTable, but found only the general opinion that it was just slow, nothing concrete. We have a prototype application made exclusively in JavaScript, and with the same 100 updates per second, the processor load is about 15%
Update
The reduction in the css fade effect we used to indicate a change in the cell value reduced the CPU load by ~ 10%. Therefore, it seems that the DOM is not the only problem.
source
share