Poor performance with KO on a larger data grid

Question

I have a decent sized data-grid (basically an interactive table) around 600 rows.

I noticed that binding KO to this grid actually takes substantial amount of time, esp. during the databind. On older browser the situation is even worse, the processor is peaked for almost a minute.

The biggest chunk of performance block seems to be coming from the line that performs the databind, NOTE: This is the initial databind, so many of reply to handling large update does not seem to be applicable.

Also mapping plugin was used to convert json objects into viewmodels on the fly. However the line that performs the mapping itself did not seem to take up too much time compared to the line that databinds.

Unfortunately paging is out of the question due to the requirement. Is there any general tips/pointers on optimizing larger view models and KO?

Answer 1

I had a similar issue and posted in the Knockout Google group. Michael Best recommended trying some custom bindings.

Since you're doing edits, his knockout-table binding won't work for you. But you might try the knockout-repeat binding. It's supposed to be faster than Knockout's native foreach (at the cost of some additional complexity in your HTML). The final option is to create your own binding that builds your grid all in one go. In theory, building the entire grid in memory and stuffing it into the DOM complete will be faster than modifying the DOM in discrete bits.

KoGrid is probably not what you want, but there are probably some hints and tips embedded in the source.

Answer 2

One advice when using the mapping plugin is to only map the properties that you need. Mapping all properties to observables in large data sets can be a real performance killer.