Performance tuning a knockout application - guidelines for improving response times

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.

Vixen

I have a number of tips to share, but no time. Will post tonight. – Freezing

@RPNiemeyer - Thanks Ryan. That would be great. – Vixen

I don't have any general tips, but you might want to try the beta of 2.1 as the comments suggest there have been some general performance improvements. – Addictive

Answer 1

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.

Freezing

Excellent blog post, Ryan. Implementing the suggestions around 'if' bindings rerendering has already made a measurable difference to my application. Looking forward to future blog posts on this issue. – Vixen

Here and here are the latest posts on this topic. – Contretemps

Hi, and thanks for the post. I have a question. I'm retrieving an observable array from ajax but the performance is being so slow for load the data on a table. could you recommend me another way ,please?. – Invercargill

Answer 2

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.

Disjunct

This jsperf test shows how expensive the indirection of a template binding is. jsperf.com/knockout-template-binding-performance/2 – Inspector

RP Niemeyer made a blog post concerning this issue: knockmeout.net/2012/06/… – Ineffable

Knockout 3.0 fixes this problem, incidentally: blog.stevensanderson.com/2013/07/09/… – Disjunct

Answer 3

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

Uneasy