ExtJS Grid, Poor Performance with High Frequency Updates?

[pkoa]

Hello,
I just began using ExtJS 3.2.1 and I’m concerned that there are usage patterns for these components that I am not aware of because the performance of the grid control is not as good as I was hoping for.

My goal is to use the ExtJS grid with a JSON data store. I am using a comet server (WebSync) to push JSON data to the client where the data is loaded into the JSON store. When I test my solution with small datasets (10 rows, 5 cols) the grid renders and updates great. However, when my dataset is larger (40 rows, 10 cols) performance begins to degrade to the point where the page seems to hang or crash.

Regarding the JSON data, the client listens to three types of data from the server in JSON format. The three data blocks represent 1) row adds, 2) row deletes, 3) row cell value changes.

An example of how the client would progress to a crash is as follows:
1. server sends a data block consisting of 40 rows, 10 cols worth of data to the client
2. client receives data block. store.loadData(datablock, true) is called. data is rendered to screen.
3. server sends a data block consisting of 40 rows, 10 cols worth of data
4. client receives data block. loops over data objects using store.GetByID() to find the matching store row. values in the row are updated and record.commit() is called to save changes. (client will receive these blocks, steadily, every 500 milliseconds)
Result: watch grid update quickly. then watch updates begin to slow. finally, watch the page crash

I am pushing relatively small chunks of data from the server to the client at the 500ms interval. In addition, I have created a windows forms solution that accepts the data pushed from the server at the 500ms interval and works great. so, I don't believe that this is related to latency transferring the JSON to the client.

General questions I have are:
Is it a problem that the JsonDataStore is being accessed from three different event handlers? Javascript applications are single threaded and event handlers are executed in a synchronous fashion, correct?
Am I expecting too much? Is it not possible to update my datastore every half second and expect the grid to be responsive?
What are the limitations of ExtJS grid (or purely javascript/html based controls in general) these days?

Thanks,
Paul

[steffenk]

Hi,

the grid rendering is poor performance, i agree. Measurements shows on a simple array grid that it takes 1,5 sec render in FF.
This is because of the huge HTML the grid produces and the way it's inserted in DOM. So, if you pull every 0.5 sec it won't work.
You can try to suspend some events, but the performance changes are marginal.

I hope there will be a more performant grid in 4.x.

[Mjollnir26]

You could also try to use a different GridView implementation (TableGridView) or even the ListView
if u can live with the drawbacks they have (no columnmove IIRC and some other missing things...)

Btw, Did u try to use an arraystore?
The normal json store sends the Data Description along with the data for each row which might be a bit slower.

And then there is Ext.USE_NATIVE_JSON which might be able to gain a few ms for you cause it will use the Browsers native JSON encode/decode methods..

[babsjr77]

Do you use beginEdit/endEdit around record updates? How about suspendEvents/resumeEvents around store?

store.suspendEvents();
foreach (json) {
    var record = findRecord();
    record.beginEdit();
    foreach (property in json) {
        record.set(property, value);
    }
    record.endEdit();
}
store.resumeEvents();

It's odd that it gets slower and slower. Are you leaking objects anywhere?