1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
    devol is on a distinguished road

      0  

    Default Very slow rendering performance with large numbers of colums

    Very slow rendering performance with large numbers of colums


    With 101 columns the grid is very slow to render, and very slow to resize an individual column. Once rendered though, scrolling is perfectly smooth and fast. I even get unresponsive script warnings in firefox. I revised my demo page to reflect it:
    http://www.brokencrew.com/~sjacobs/grid/portal-yui.html

    I don't know if this is a bug exactly, but it is a performance issue. Its slow on XP its REALLY slow on osx.

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    That is very slow. You might try playing with the updateColumns code and seeing if you can find a block of code that creates the bottleneck. If you do, please let me know. It is, however, very possible the speed issue is related to the browser moving all the elements sideways and not the JS. 100+ columns is a lot to layout. I will also take a look at it here and see if I can find a workaround.

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
    devol is on a distinguished road

      0  

    Default


    Once the page is rendered scrolling proceeds just find. Its just the initial render that is so slow. I'd be willing to disable column resizing for the speed improvement. Unforunately this app needs to display a large number of columns. In the future I plan to have 3 fixed columns in the layout as well.

    The other grid code I used from turboajax seems to lay out way faster, but the feature set isn't as good. Every column has to be a fixed width (except the first), etc.

    I tried changing the onload to an onAvailable call, and it doesn't seem to help much.

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
    devol is on a distinguished road

      0  

    Default


    To use the "source" version of the library, is there a specific order you need to include the JS files in? I'm on a mac here and can't use your JS tool to build a new file each time. I've tried figuring out the order and now I don't get load errors, but the page doesn't render correctly either.

  5. #5
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    The everything file is like this (copied from yui-ext.jsb project file):

    Code:
    <include name="yutil.js" />
        <include name="DomHelper.js" />
        <include name="Element.js" />
        <include name="EventManager.js" />
        <include name="UpdateManager.js" />
        <include name="widgets\TabPanel.js" />
        <include name="anim\Animator.js" />
        <include name="anim\Actor.js" />
        <include name="widgets\Toolbar.js" />
        <include name="widgets\Resizable.js" />
        <include name="widgets\SplitBar.js" />
        <include name="grid\Grid.js" />
        <include name="grid\GridDD.js" />
        <include name="grid\GridView.js" />
        <include name="grid\PagedGridView.js" />
        <include name="grid\EditorGrid.js" />
        <include name="grid\AbstractColumnModel.js" />
        <include name="grid\DefaultColumnModel.js" />
        <include name="data\AbstractDataModel.js" />
        <include name="data\DefaultDataModel.js" />
        <include name="data\LoadableDataModel.js" />
        <include name="data\XMLDataModel.js" />
        <include name="data\JSONDataModel.js" />
        <include name="grid\SelectionModel.js" />
        <include name="grid\EditorSelectionModel.js" />
        <include name="grid\editor\CellEditor.js" />
        <include name="grid\editor\CheckboxEditor.js" />
        <include name="grid\editor\DateEditor.js" />
        <include name="grid\editor\NumberEditor.js" />
        <include name="widgets\DatePicker.js" />
        <include name="grid\editor\SelectEditor.js" />
        <include name="grid\editor\TextEditor.js" />

  6. #6
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
    devol is on a distinguished road

      0  

    Default


    The archive I have doesn't contain those files...

    And that would be because somehow I managed to download an old release! Ack! Lets see if the original problem is still there...

  7. #7
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
    devol is on a distinguished road

      0  

    Default


    It is. Ok. Continuing with your instructions.

  8. #8
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
    devol is on a distinguished road

      0  

    Default


    Slowest part of the loop in there is this:
    Code:
    this.setCSSWidth(i, width, pos);
    About a .130 seconds each loop. Everything else in the loop is super quick.

    Narrowed down further to:
    Code:
    rule.style[property] = value;
    line 305 of yutil.js

  9. #9
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Yeah I found the same thing. It's the browser like I thought. That's bad. I don't think there's anything that can be done short of implementing another view that is more friendly to lots of columns. Maybe something table based.

  10. #10
    Ext User
    Join Date
    Mar 2007
    Posts
    48
    Vote Rating
    0
    devol is on a distinguished road

      0  

    Default


    Thats what this other grid used. Ugh.

    I wonder if this is possible:

    Set the styles before generating the html. Don't allow the width to change. (with a flag like noResize or something).

Similar Threads

  1. Slow tabbing between GridPanel in BorderLayout
    By kalebwalton in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 26 Mar 2007, 1:23 PM
  2. grid, domhelper SLOW for large sets
    By amackay11 in forum Ext 1.x: Help & Discussion
    Replies: 6
    Last Post: 6 Mar 2007, 11:32 AM
  3. Grid & Slow performance?
    By jay@moduscreate.com in forum Ext 1.x: Bugs
    Replies: 2
    Last Post: 24 Oct 2006, 9:35 AM
  4. Weird rendering issue when rendering more than 11 columns
    By devol in forum Ext 1.x: Help & Discussion
    Replies: 18
    Last Post: 13 Oct 2006, 9:37 PM
  5. Sorted colums
    By Ejetorix in forum Ext 1.x: Bugs
    Replies: 3
    Last Post: 11 Sep 2006, 1:27 PM

Thread Participants: 2