Reduce rendering time / browser freezing

bigerock

hi, i've got a set of about 300 records and it's taking about 15 seconds to render the datatable. i'm loading my table from the server using breeze.js, and loading that result set into an array of objects. the platform i'm using is durandal using knockoutjs, breezejs, and this datatable. i'm using knockoutjs' custom binding handler to help create the table.

i've tried setting the bDeferRender: true, but it's now causing the table not to render any of the rows (headers only).

*sorry, but i can't produce a fiddle right now - it's kinda involved to do with durandal.

here's my table. the data: submissionsDataTable part is this: the 'data' is used in the knockoutjs custom binding, and submissionsDataTable is the name of my observable array (object array that contains the data).

[code]



ID
Program
UPC
Product ID
Artist
Title




[/code]
any ideas what i might be missing?

allan

That's a very long time for only 300 records. That says to me something badly is going wrong somewhere. How are you adding the rows? I'm guessing it's going to be redrawing on every add - that's bad! But not sure with out the code.

Allan

bigerock

i just realized where the slowness is coming from ... it was iterating each record and pushing each object in the array from the server to the observableArray. Instead, i pushed all objects to a temporary array and then added that array to the observableArray once the iteration was complete. this did the trick.

success!

however, just to test a larger amount, i did add 5000 records to the db and this did end up slowing it down despite my above change (took about 7 seconds of browser-hang time - incidentally i'm using the latest Google Chrome on a PC with lots of RAM and CPU power).

i guess that's to be expected - 7 seconds for 5000 client rows (even though only 10 are displaying).

is there still something else i could do - besides paging the records on the server?

allan

That still seems very slow to me - scroller can handle 10 times that number of rows in much less time for example - http://DataTables.net/extras/scroller . I think only a profile would show where the time sink is.

Allan

bigerock

i did a javascript profile - of course it doesn't tell me much because during the freeze, nothing is really captured. i've included some links here so you can see the results of the profile. maybe you can see something that i don't?

http://d.pr/i/STrC
http://d.pr/i/r9Oq

allan

To be honest, I think I'd need to actually use the page myself and do the profile so I can worth through it as I can't get the information needed from images.

Allan

bigerock

Thanks Allan. I'd have to take some time to put together a suitable example as i can't share the code unfortunately. I wish i could because yeah, it makes no sense. It could have something to do with knockout.js and observables creating some stress when the datatable loads. not sure.

i'll let you know if i can create an example. thanks for your help.