Performance Issue with Datatables having fixed columns

arunjaykrishnan

Hi,

We are facing delay up to minutes while loading a datatable. When we analyzed performance using F12 debugger-> Performance option, it was showing that the dom loading was taking 80% of the cpu time.
We are using the fixed column option along with serverside option as our data can be up to 20000 rows. We are displaying 90 columns. We are using datatables-1.10.19, fixedcolumns-3.2.6. Please help.

Thanks,
Arun

arunjaykrishnan

The main latency is coming from two methods in datatables: _fnInitComplete and _fnDraw. Please find the F12 Performance screenshot attached.

kthorngren

Its hard to say without at least seeing your Datatables init code. Maybe you are doing something in initComplete or columns.render that is slowing down the page.

How many rows of data is being returned?

Can you post a link to your page for diagnosis?

Kevin

arunjaykrishnan

Hi Kevin,

Regarding your query How many rows of data is being returned? - We are using serverside option. It is returning 117 records for a page( total records 1184).

I have commented out all render and fnInitComplete from our code, but still getting the same latency.

I will create a test case with our code shortly and add it to the comment.

Mean while for the data similar to ours (up to 20000 with 90 columns) , what is the response time we can expect provided our ajax call return response with in 5 seconds.

Thanks,
Arun

kthorngren

It is returning 117 records for a page( total records 1184).

You have the pageLength option set to 117? Interesting page length.

I have commented out all render and fnInitComplete from our code, but still getting the same latency.

Ok, it sounds like you don't have any loops running within the Datatables init code. You can use something like this example to get the time it takes to initialize:
http://live.datatables.net/fomaqofu/1/edit

Mean while for the data similar to ours (up to 20000 with 90 columns) , what is the response time we can expect provided our ajax call return response with in 5 seconds.

With server side processing enabled the amount of records returned from each ajax request is the same. Sounds like 117 in your case. Whether you have 2000 rows or 20,000 rows the number of records returned is the same so the time to render should be consistent. The expected response time is relative to your environment, ie, network, server, DB query efficiency, etc.

Kevin

arunjaykrishnan

Hi Kevin,

Thanks for the suggestion.
The example mentioned above uses a smaller set of columns and data set. I copied it and and tried to increase the size of data to check the performance with a larger dataset and columns but it was giving me javascript error (after 36 column) and I am not sure what is the issue here.
Meanwhile in my application, I hard coded the data set and logged the performance (based on your suggestion). draw callback was taking 2.5 seconds for a dataset of 36 columns and 72 rows where as for 72 columns and 72 rows it takes 6 seconds. Of the 6 seconds, the code
body.append($(anRows)); in _fnDraw method in jquery.datatable is taking 4.2 seconds.

Sorry to be picky but this 6 seconds added with time to fetch the data etc is causing a slow experience when user scrolls edit etc. Is there any way to make this faster?

One more thing I observed is that the method: table.cell(row.index(), fieldName + ':name') was performing very slowly may be iterating internally through rows and columns. Hence I had to replace this easy to use method with table.cells(object array); after creating the array of object having the desired row and column combination.

Regards,
Arun

kthorngren

I observed is that the method: table.cell(row.index(), fieldName + ':name') was performing very slowly
replace this easy to use method with table.cells(object array);

Like I mentioned before you haven't posted any of your code for us to see what you are doing. Not sure when/where this is being used and why its an issue.

Are you able to post a link to your page so we can take a look?

Kevin

arunjaykrishnan

Hi Kevin,

Code is below:
http://live.datatables.net/soserice/1/edit

But in this sample, the datatable for 72 rows is loading in 1 sec. When i execute similar code in internet explorer 11 it is taking 30 seconds. It is faster in firefox and chrome. But IE 11 is the preferred browser for our application. As mentioned before the code body.append($(anRows)); inside datatable's _fnDraw is one of the bottleneck. Based on the time logged in console, there were two calls to the draw method as we are using fixed column option and each was taking approximately 6 seconds for ie11. For firefox, it is taking less than 100 ms. Please help.

Thanks,
Arun

tangerine

Your example has bad loading sequence.
Should be jQuery's js first, then DataTables' js, then DataTables' extensions js.

arunjaykrishnan

Corrected in this link: http://live.datatables.net/soserice/3/edit

It is taking 700 milli seconds in firefox and 2 seconds in IE 11 to load hardcoded data.