View Full Version : Very slow rendering performance with large numbers of colums

12 Oct 2006, 9:30 AM
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:

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.

12 Oct 2006, 9:53 AM
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.

12 Oct 2006, 11:11 AM
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.

12 Oct 2006, 12:31 PM
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.

12 Oct 2006, 1:08 PM
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" />

12 Oct 2006, 1:17 PM
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...

12 Oct 2006, 1:26 PM
It is. Ok. Continuing with your instructions.

12 Oct 2006, 2:00 PM
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

12 Oct 2006, 2:40 PM
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.

12 Oct 2006, 3:22 PM
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).

29 Dec 2006, 5:38 AM
Has any1 found a solution? I have this issue with a very small amount of data (with JSONDataModel). First i thought its because my data-model is bound to more than one grid, but i use lazy loading and the issue is on the first call too.

There is an example at this forum which changes the grid behavior by using float:left on rows. This version is much faster and the problem doesnt exists anymore.