GWT FlexTable prestazioni e ottimizzazione

Question

Sto lavorando al progetto GWT in cui stiamo utilizzando FlexTable per visualizzare alcuni dati. So che probabilmente dovremmo usare CellTable in quanto ha prestazioni migliori, ma FlexTable è più facile da stile (celle con stile specifico) e rende più semplice l'aggiornamento di celle specifiche.

Per ricevere gli aggiornamenti per la tabella, stiamo utilizzando WebSockets. Il problema che stiamo affrontando in questo momento è un elevato carico della CPU quando ci sono più di 100 aggiornamenti al secondo provenienti da WebSockets. Ogni messaggio dalla connessione WebSocket contiene aggiornamenti per diverse celle nella tabella. Quindi nella pratica ci sono più di 100 aggiornamenti al secondo che dovrebbero essere resi nella FlexTable. Il carico della CPU sul mio 3GHz i5 con 4 GB di RAM è di circa il 50%. Se disattivo il rendering effettivo dei dati (commenta le chiamate al metodo setText()), il carico della CPU scende al 5-10%. Quindi so che gli aggiornamenti DOM sono il collo di bottiglia, non le altre parti del codice.

sarebbe meglio

1. uso Griglia invece
2. interruttore per CellTable (ma come fare aggiornamenti cellulari singe poi)?
3. uso JS/JSNI di lavorare con DOM invece di FlexTable setText()

ci sono modi migliori per attuare tavolo e migliorare le prestazioni?

Ho provato a google se qualcuno ha avuto problemi simili con FlexTable, ma ho trovato solo l'opinione generale che è solo lento, niente di specifico. Abbiamo prototipo applicazione fatto puramente in JavaScript e con le stesse 100 aggiornamenti al carico seconda CPU è circa il 15%

Aggiornamento
Dropping effetto di dissolvenza css che abbiamo usato per indicare il cambiamento del carico della CPU valore della cella ridotto di ~ 10 %. Quindi sembra che il DOM non sia l'unico problema.

Answer 1

In alternativa (o in aggiunta, a seconda di quali risultati si ottengono) a tutti i precedenti, cercherò di utilizzare alcuni dei metodi dell'Utilità di pianificazione. Soprattutto Scheduler.get(). ScheduleIncremental() e fare aggiornamenti in gruppi di dire 10 alla volta. Ciò consentirà al browser di elaborare altri eventi tra gli aggiornamenti e dovrebbe avere un effetto positivo sull'utilizzo della CPU.

CellTable non ti aiuterà affatto perché non puoi aggiornare singole celle. Quindi in alternativa ti lascia solo la griglia e gestisci manualmente un TableElement.

Answer 2

Con un oggetto CellTable è necessario eseguire nuovamente il rendering dell'intera tabella per aggiornare una singola cella. Tuttavia, tale aggiornamento sarebbe un singolo aggiornamento del DOM. Con una FlexTable, anche se metti in batch tutti gli aggiornamenti insieme, farai una serie di manipolazioni DOM separate. Pertanto, anche se potrebbe sembrare inefficiente utilizzare un oggetto CellTable perché si aggiornano alcune celle in modo ridondante, potrebbe comunque valere la pena cambiarlo. Specialmente nel caso in cui si stia aggiornando un numero di celle vicino al numero totale di celle: il batch 100 aggiorna insieme e fa tutto in una volta per una singola scrittura DOM.

Ho un'app con un CellTable che può essere grande come 30x100. Ha stili arbitrari su celle arbitrarie, ogni cella ha contenuti complessi (uno <img>, alcuni <div> s e un testo) e talvolta ho bisogno di aggiornare una singola cella. Il ridisegno dell'intera scena è impercettibile (per le mie percezioni umane) sul mio macbook pro in modalità di sviluppo.

Se si desidera ricevere aggiornamenti in tempo reale (ad esempio, 100 aggiornamenti al secondo, mentre si verificano), penso che si possa desiderare una piattaforma diversa. Nemmeno il tuo monitor si sta aggiornando 100 volte al secondo.