1. #1
    Ext User
    Join Date
    Sep 2010
    Posts
    1
    Vote Rating
    0
    pkoa is on a distinguished road

      0  

    Question ExtJS Grid, Poor Performance with High Frequency Updates?

    ExtJS Grid, Poor Performance with High Frequency Updates?


    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

  2. #2
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    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.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  3. #3
    Sencha User Mjollnir26's Avatar
    Join Date
    Oct 2008
    Location
    Germany
    Posts
    152
    Vote Rating
    0
    Mjollnir26 is on a distinguished road

      0  

    Default


    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..

  4. #4
    Sencha Premium Member
    Join Date
    Dec 2007
    Posts
    38
    Vote Rating
    2
    babsjr77 is on a distinguished road

      0  

    Default


    Do you use beginEdit/endEdit around record updates? How about suspendEvents/resumeEvents around store?
    Code:
    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?

Similar Threads

  1. Interesting high performance grid
    By mankz in forum Community Discussion
    Replies: 7
    Last Post: 21 Aug 2010, 1:59 PM
  2. Grid and record.endEdit() very poor performance.
    By heavywave in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 27 Jul 2010, 10:46 PM
  3. Best Practices for High Frequency AJAX Polling
    By esdot in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 24 Aug 2009, 4:36 AM
  4. this.grid is null or not object when u dot tree node with high frequency
    By forefront in forum Ext.nd for Notes/Domino
    Replies: 2
    Last Post: 20 Jul 2009, 2:17 AM
  5. Any Workaround for Poor Grid Rendering Performance with Many Rows
    By aendo in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 31 Oct 2007, 9:46 AM

Thread Participants: 3

Tags for this Thread