KnockoutJS performance

[nowamasa]

We have a list widget that's managed by Knockout (using the mapping
plugin), and it works well in Chrome, Firefox and Opera, but
performance is horribly slow in IE7&8 (surprise!).

I've extracted the relevant code to jsFiddle to demonstrate the
problem - it updates a list of 200 items (when you click on the list),
and the time taken for each update (on my PC running Windows 7 64-bit)
is as follows:

Chrome: ~ 319 ms
Firefox: ~ 423 ms
Opera: ~ 566 ms
IE7: ~3488 ms
IE8: ~3542 ms

The two things I'd like to know are:

* From this code sample, are we using Knockout correctly? Can we
improve performance generally by doing anything different?
* Is there anything specific we can do to improve performance in IE?

[nowamasa]

http://jsfiddle.net/BuFgf/

[guhe...@gmail.com]

Well, imho the simpliest solution is don't use knockout's template engine, use jquery template engine insead. Knockout does support the jquery template engine in the newest version.

http://api.jquery.com/jquery.tmpl/

[Michael Best]

It seems that over half the time is from the mapping call, and the
rest is from updating the bindings. I'm not so familiar with the
mapping plugin, but you might try changing your code to update your
view model directly instead of using the plugin.

Also you could try using the 2.1 version of Knockout that has some
performance improvements.

[Michael Best]

Here's an example of what I'm talking about:
http://jsfiddle.net/mbest/6JjsX/

[gaffe]

I also have pages that load some huge viewmodels, lists of like 3000-4000 things are very slow. Good to know mapping might be what is taking a large part of the time. 

I wouldn't use the jquery templates. I moved away from those, the new knockout templates are faster for me not slower. 

Jquery templates can also be a hassle to debug, and can sneak up on you in nasty ways, for example, if you have code like:

data-bind=" event: {change: function() { /*dosomething*/ }}"  the }} characters will be interpreted as a jquery template and you will have errors. 

//if you do use them, the solution is to put a space, like so data-bind="event: {change: function() { /*dosomething*/ } }" by the way

[Michael Best]

You can get some extra speed increase (especially with updates) by
using my repeat binding:

http://jsfiddle.net/mbest/ZRBmv/

[rafad...@gmail.com]

Don't forget your UI design. If you have Master/Detail like structures, you do two things:

 - Retrieve your data from the server only when needed.

 - Control witch bindings are processed by knockout using conditional bindings.

It explains in more detail <a href="http://codemadesimple.wordpress.com/2012/06/14/kockout-performance-tip-1-2/">here</a>, the difference in using the **visible** and the **if** binding.