1. #1
    Ext JS Premium Member prophet's Avatar
    Join Date
    Mar 2007
    Location
    Greenwich, CT
    Posts
    187
    Vote Rating
    0
    prophet is on a distinguished road

      0  

    Default Performance Issues with Multiple Grids and Tabs

    Performance Issues with Multiple Grids and Tabs


    I have a page with multiple tabs (using yui-ext), and multiple grid components (obviously, yui-ext too).
    The data for each of the grids load when the corresponding tab becomes activated.
    Grids are render()ed when the page is initially loaded.

    However, the initial page load is still rather slow. Do I need to render the grids after page load? What can I do to make things respond faster?

    Thanks!
    -Brad.

  2. #2
    Ext JS Premium Member cdomigan's Avatar
    Join Date
    Mar 2007
    Posts
    148
    Vote Rating
    1
    cdomigan is on a distinguished road

      0  

    Default


    I'm using Ext 1.0 and have encountered the same problem. I have a page with 6 tabs, each containing a GridPanel with a grid. The initial render time if this page is long enough for many browsers to display a "the script is not responding" error. Any ideas on how to speed up the creation of multiple grids all in one go?

    Cheers

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Virginia, USA
    Posts
    220
    Vote Rating
    0
    dfenwick will become famous soon enough

      0  

    Default


    You could render the grids and lazy load the datasets. Remember, when you have a large number of XHRs running, you're limited to a specific number of connections to the web server. This is in the HTTP 1.1 spec. They specify that you can have 2 open connections to an HTTP server at a time. Internet Explorer follows this spec by default. There are registry tweaks to increase this value, but I rarely recommend people change it. It's there for a reason.

    I believe Firefox defaults to 8 open requests. If you have 1 grid on each of your 6 tabs and you're loading your main page, you have 7 HTTP connections. If you're using Internet Explorer, additional XHRs will be queued. If the dataset retrieval backend takes a while to process, you could potentially sit waiting for a long time while the requests are serviced.

    I'd recommend lazy loading of the datasets in grids on panels that aren't visible. Load the dataset when the panel is activated. You can hook the 'panelactivated' event on your region and load your dataset then.

  4. #4
    Ext JS Premium Member cdomigan's Avatar
    Join Date
    Mar 2007
    Posts
    148
    Vote Rating
    1
    cdomigan is on a distinguished road

      0  

    Default


    Unfortunately it's not loading the data stores that is causing the slowdown. It's the initial render time of the page - having to construct and render 6 grids at one go just takes too long. Once the grids (eventually) render, they then load their datastores, which is fine because at least you then have a loaded and responsive ui.

    Is there any way to optimize the creation and loading of grid widgets so that we can realistically have 5+ grids on a page (tabbed) and not suffer huge load times?

    Chris

  5. #5
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Virginia, USA
    Posts
    220
    Vote Rating
    0
    dfenwick will become famous soon enough

      0  

    Default


    Quote Originally Posted by cdomigan View Post
    Unfortunately it's not loading the data stores that is causing the slowdown. It's the initial render time of the page - having to construct and render 6 grids at one go just takes too long. Once the grids (eventually) render, they then load their datastores, which is fine because at least you then have a loaded and responsive ui.

    Is there any way to optimize the creation and loading of grid widgets so that we can realistically have 5+ grids on a page (tabbed) and not suffer huge load times?

    Chris
    I bet you're running into this problem:

    http://www.extjs.com/forum/showthrea...el+performance

    Can you try setting background:true on the 2nd and successive additions of your grid panels to your border layout? I'd be interested to see if this helps.

  6. #6
    Ext JS Premium Member cdomigan's Avatar
    Join Date
    Mar 2007
    Posts
    148
    Vote Rating
    1
    cdomigan is on a distinguished road

      0  

    Default


    Quote Originally Posted by dfenwick View Post
    I bet you're running into this problem:

    http://www.extjs.com/forum/showthrea...el+performance

    Can you try setting background:true on the 2nd and successive additions of your grid panels to your border layout? I'd be interested to see if this helps.
    Setting background:true has no effect I'm afraid. From reading the post you linked to it seems it may just be the fact that the grid is a fairly "heavy" widget, and creating 6 of them at once is just impractical.

  7. #7
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Virginia, USA
    Posts
    220
    Vote Rating
    0
    dfenwick will become famous soon enough

      0  

    Default


    Quote Originally Posted by cdomigan View Post
    Setting background:true has no effect I'm afraid. From reading the post you linked to it seems it may just be the fact that the grid is a fairly "heavy" widget, and creating 6 of them at once is just impractical.
    It's a bit baffling. An empty grid shouldn't require many resources at all. If you have a reasonable sample, that would be useful to look at. It should literally take less than, say, 2 seconds to load 6 empty grids.

  8. #8
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    91
    Vote Rating
    12
    ismoore will become famous soon enough

      0  

    Default late render helps

    late render helps


    I have been having similar issues with ext and I can confirm that I found loading 6 empty grids to be taking 15sec +

    see this thread for more details.

    The only solution I have found at present is to render the grid on tab activate. It means that the first time the grid each grid there is a pause while it renders but subsequent calls to refresh the data are fine.

    The issue is definitely related to grid render times which far outweigh the data loading.

    So each of my panels are created as so with no call to render:
    Code:
    grid = new Ext.grid.Grid(id, {ds:dataModel, cm:colModel, sm:selectionModel, trackMouseOver:true,autoSizeColumns:false, autoSizeHeaders:false})
    var vp = innerLayout.add('center', new Ext.GridPanel(grid));
    	
    vp.addListener('activate', onPanelActivate)
    Here is my on activate trigger

    Code:
    function onPanelActivate(cp){
    	
    	var ds = cp.getGrid().getDataSource()
    	if (!cp.getGrid().rendered)
    		cp.getGrid().render()
    	ds.load()
    
    }
    This may not completely solve the problem but it has worked for me so far....
    Ian

  9. #9
    Ext User
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    anakreon is on a distinguished road

      0  

    Default


    I have a similar problem with grids except that I use Editable Grids (7 of them).

    The rendering takes a lot of time, even when the grid contains just one row.
    With Firebug I checked the HTML the grid component generates.
    For one grid with 13 columns and one row, the size was 8K.

    I use the old grid (prior to version 1) .
    Could the size of the HTML be the problem?

  10. #10
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Virginia, USA
    Posts
    220
    Vote Rating
    0
    dfenwick will become famous soon enough

      0  

    Default


    I just profiled an app that has 6 grids in it. This was run on an old generation Pentium 4 2.8Ghz box with 768MB of memory. I specifically wanted to load it on a box that I felt would adequately reflect corporate style users.

    The entire load time, from the time I started the Firebug profiler, to the time I stopped the profiler (which was after load complete) averaged 2790ms on 20 runs, or just about 3 seconds. That's 6 grids loading in 6 separate panels. The grids each have 5 columns and it's not doing auto column sizing (an enormously expensive operation.) It's set to auto expand the middle column in the column list. It's doing no data loading.

    The same app, with autoExpandColumn disabled and autoSizeColumns enabled takes on average 4890ms to render (on 20 runs.) Adding column locking had no noticeable effect on the rendering times.

    I'm going to dive in and look at where it's spending its time doing the work. I already know it's spending a lot of time in updateRule(), which has been reported in the past.

Similar Threads

  1. CSS conflicts with multiple grids
    By SLerman in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 20 Mar 2007, 11:58 PM
  2. multiple grids tip
    By hugo_alvarado in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 20 Mar 2007, 9:47 AM
  3. Multiple grids inside BasicDialog
    By griffiti93 in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 8 Feb 2007, 1:12 PM
  4. Grids in BorderLayout/ContentPanel and scrolling issues
    By glassy in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 1 Dec 2006, 10:04 AM
  5. Multiple Grids with Tabs
    By tik1 in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 14 Nov 2006, 7:00 PM

Thread Participants: 7