GWT FlexTable rendimiento y optimización

Question

Estoy trabajando en el proyecto GWT donde estamos utilizando FlexTable para mostrar algunos datos. Sé que probablemente deberíamos usar CellTable ya que tiene un mejor rendimiento, pero FlexTable es más fácil de diseñar (estilo de celdas específicas) y hace que sea más fácil actualizar una celda específica.

Para recibir actualizaciones para la tabla que estamos usando WebSockets. El problema al que nos enfrentamos en este momento es una gran carga de CPU cuando hay más de 100 actualizaciones por segundo que llegan a través de WebSockets. Cada mensaje de la conexión WebSocket contiene actualizaciones para varias celdas en la tabla. Entonces, en la práctica, hay más de 100 actualizaciones por segundo que deberían presentarse en la FlexTable. La carga de la CPU en mi 3GHz i5 con 4 GB de RAM es de alrededor del 50%. Si deshabilito la representación real de los datos (comentar las llamadas al método setText()), la carga de la CPU baja al 5-10%. Entonces sé que las actualizaciones DOM son el cuello de botella, no las otras partes del código.

¿Sería mejor a

1. uso de la red en lugar
interruptor
2. a CellTable (pero cómo hacer cambios celulares chamusquina a continuación)?
3. utilización JS/JSNI trabajar con DOM en lugar de FlexTable setText()

¿Hay mejores maneras de implementar mesa y mejorar el rendimiento?

He intentado con google si alguien tuvo problemas similares con FlexTable, pero encontré solo la opinión general de que solo es lento, nada específico. Tenemos prototipo de aplicación realiza exclusivamente en JavaScript y con los mismos 100 actualizaciones por segundo carga de la CPU es de alrededor de 15%

actualización
Dejar caer efecto de fundido css y que usamos para indicar un cambio en la carga de la CPU valor de la celda reducida por ~ 10 % Entonces parece que el DOM no es el único problema.

Answer 1

Como alternativa (o además de, dependiendo de los resultados que obtenga) a todo lo anterior, consideraría el uso de algunos de los métodos del Programador. Especialmente Scheduler.get(). ScheduleIncremental() y hacer actualizaciones en lotes de, por ejemplo, 10 a la vez. Esto permitirá que el navegador procese otros eventos entre actualizaciones y debería tener un efecto positivo en el uso de la CPU.

CellTable no lo ayudará en absoluto aquí porque no puede actualizar celdas individuales. Entonces, como alternativa, solo le deja la Cuadrícula y administra manualmente un TableElement.

Answer 2

Con una CellTable, tiene que volver a procesar la tabla completa para actualizar una sola celda. Sin embargo, dicha actualización sería una actualización única del DOM. Con una FlexTable, incluso si junta todas sus actualizaciones, realizará una serie de manipulaciones de DOM por separado. Por lo tanto, aunque parezca ineficiente utilizar una CellTable porque actualiza algunas celdas de forma redundante, puede que valga la pena cambiarla. Especialmente en el caso de que esté actualizando un número de celdas cerca del número total de celdas: lotes de 100 actualizaciones juntas y hacerlas todas a la vez para una sola escritura DOM.

Tengo una aplicación con una CellTable que puede ser tan grande como 30x100. Tiene estilos arbitrarios en celdas arbitrarias, cada celda tiene contenidos complejos (<img>, algunos <div> s, y algunos textos) y, a veces, necesito actualizar una sola celda. Redibujar todo es imperceptible (para mis percepciones humanas) en mi macbook pro en modo desarrollo.

Si desea actualizaciones en vivo (por ejemplo, 100 actualizaciones por segundo, a medida que ocurren), entonces creo que es posible que desee una plataforma diferente. Ni siquiera su monitor se actualiza 100 veces por segundo.