table rendering freezes the tab for 10+ seconds

terminal

I can't link to a page unfortunately. The issue is that datatables finishes creating the table but the render to the screen is taking 10+ seconds with ~8000 entries. I've tried creating the table in a document fragment but, of course, that doesn't help with the rendering.

I tried to use the datatables debugger but it didn't provide me with a reference number. The output example also leads me to a 404 page.

I could provide a CPU profile if that helps. It shows that "program" is taking the majority of the time, and using a fairly small amount of the CPU.

Any idea what might be the problem? Are there any know tricks to get rendering to work faster (use less columns, etc)? Any got-yas? I've already got paging working, but I'd rather not use it if I don't have to since we are fairly far along in the project.

systematical

1: As you know 8,000 entries is a lot. Have you considered using pagination?

2: Have you considered using server side processing with pagination and only loading say 500 or even 1000 records into the DOM at a time?

3: Your profiler should be telling you more than that. Are you using Chromes profiler? There should be a ton of stuff in there. None of which will likely help since DataTables is a pretty massive library.

terminal

Thank you for your response. I think you are spot on with your comments, 8000 lines is just too many to display on the page at once. Here is what I've found/done so far if it helps anyone in the future. Please correct any mistakes.

1. Yes, actually I'm switching to scrolling with deferred rendering.

2. Yes, but this is seems to be a rending problem. Datatables is able to create the table with the entries and add it to the DOM very quickly.

3. Yes, I am using Chrome. I can see all Datatables calls, and they complete very quickly. "program" then takes over. From what I've been able to find out "program" is Chrome itself processing whatever it is it is processing, and not actually running any Javascript. My guess is that Chrome is trying to render the page while "program" is showed as using the CPU. By adding scrolling and deferred rendering the table finishes rendering very quickly.

robertbrower

Hmmm. 8000 rows should be nothing for Chrome even without server side paging, from my experience. How many columns?

terminal

15 columns. And the problem seems to be intermittent. I made a test case at http://live.datatables.net/pixicof/1/edit

It seems like it will only create up to ~ 4000 entries.

Edit: Actually seeing the numbers of rows created varying between 3000 and 7000 for the most part. I have it set to create 8000 rows with 15 columns each.

Edit: Ran it some more in the output only page (http://live.datatables.net/pixicof/1) and it seems to do fine, the table has 8000 entries every time.

terminal

I added a draw callback to see when the draw completes. I get the console message long before the table is displayed.

[code]
this.$('table').dataTable({
"aoColumns" : aoColumns,
"aaData" : rows,
"bPaginate" : false,
"bFilter" : do_filter,
"bSort" : do_sort,
"fnDrawCallback": function( oSettings ) {
console.log( 'DataTables has redrawn the table' );
}
});
[/code]