Performance tuning a knockout application - guidel

Question

I have a large, complex page that relies heavily on knockout.js. Performance is starting to become an issue but examining the call stack and trying to find the bottlenecks is a real challenge.

I noticed in another question ( Knockout.js -- understanding foreach and with ) that the accepted answer has the comment:

...and I suggest not using with where high performance is necessary because of the overhead...

Assuming the statement is true, this is really useful stuff to know and I have not found a source for such performance tips.

Therefore, my question is:

Are there general guidelines / top tips that I can apply to help the performance of my application before I get deep into classic performance tuning.

Answer 1

I think mapping can help too you can follow this test and see difference between using jquert map , knockout map knockout-map-vs-jquery-map

When you start using heavily ObservableArrays mapping become crucial

Answer 2

I think that it would be too much to layout the tips that I have in mind in one answer.

I started a series of blog posts on this topic. The first post is here.

This post describes a bit how if/with work (copies the children as its template and re-renders using the template whenever the binding is triggered) and explains how these bindings can be cause re-renders much more often than expected.

I will update this answer with future posts.

Answer 3

One of the biggest gotchas I've found (and not seen discussed elsewhere) is that Knockout re-evaluates every binding on an element whenever any binding on the element changes.

That's ordinarily not a big deal, but for bindings that tend to be expensive (e.g. template), it can create significant performance problems.

Attach bindings that render content/children (template, foreach, etc.) to a virtual element (using the containerless control flow syntax) if they're not the only binding on the element.