Very slow rendering performance with large numbers of colums

[devol]

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.

[jack.slocum]

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.

[devol]

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.

[devol]

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.

[jack.slocum]

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

<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" />

[devol]

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

[devol]

It is. Ok. Continuing with your instructions.

[devol]

Slowest part of the loop in there is this:

this.setCSSWidth(i, width, pos);

About a .130 seconds each loop. Everything else in the loop is super quick.

Narrowed down further to:

rule.style[property] = value;

line 305 of yutil.js

[jack.slocum]

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.

[devol]

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