Start Building Professional
Web Apps Today

Slow performance with medium sized datasets

I have noticed that with a data set which is of non-trivial size, the performance of the grid is rather slow.

An example XML file is available at the following URL:
http://hologrambi.com/tmp/xml31.formatted.xml

This grid is only 113 rows long but makes extensive use of the rowspan functionality.

Loading the grid using the loadXML method takes several seconds. Once the grid is loaded, resizing columns is also very slow.
With larger datasets, loading can be extremely slow (to the point of freezing the browser for several minutes).

Is there perhaps something we are doing that is causing it to be this slow? Or, is there any way of improving the performance of the grid.

Cheers,
Yudhi

Two solutions:

1. enable SmartRendering mode
2. remove class-es set for each cell (this is first reason for bad performance)

 

Thanks for the suggestions.

Removing the classes alone did not improve performance but combining the two suggestions did.

However, enabling smart rendering causes the rowspan functionality to break so this is not an option.

Is there anything else that we can try?

Just wanted to revisit this.

I ran a profiler (Firebug) on a page loading XML dataset into the dhtmlx grid.

From looking at the results it seems a lot of the time is spent calculating the column split (we are calling splitAt in the afterInit section of the XML).  Removing this reduces the loading time significantly but it is still sluggish.

I've attached the XML and profiling results (in tab delimited text format) with and without the splitAt call.  We would very much appreciate it if you could take the time to have a look at this and perhaps suggest some ways to avoid the bottleneck or otherwise improve performance.

Cheers

>>From looking at the results it seems a lot of the time is spent calculating the column split
Combination of rowspan and split cause many height checking calls which is not really necessary in your case. 
You can try to update dhtmlxgrid_splt.js in next way - locate and comment next chunk of code ( lines 46-58 )
  if (this.multiLine || this._erspan){
      this.attachEvent("onCellChanged",this._correctRowHeight);
      var corrector=function(){
          this.forEachRow(function(id){
              this._correctRowHeight(id);
            })
        };
      this.attachEvent("onXLE",corrector);
      this.attachEvent("onResizeEnd",corrector);
      this.attachEvent("onAfterSorting",corrector);
        
      }

it will improve loading time of provided XML on 30-40%

>>With larger datasets, loading can be extremely slow
Can be improved only by removing rowspans and using smart rendering mode.
Are you really need rowspans? - you can attach special css classes for the cells, which will made bottom cell border invisible, which will look as rowspan but will work a much faster.