42

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.

Community
  • 1
  • 1
Mark Robinson
  • 13,128
  • 13
  • 63
  • 81

3 Answers3

37

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.

RP Niemeyer
  • 114,592
  • 18
  • 291
  • 211
  • 4
    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. – Mark Robinson Mar 30 '12 at 11:31
  • 2
    [Here](http://www.knockmeout.net/2012/04/knockoutjs-performance-gotcha.html) and [here](http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3-all-bindings.html) are the latest posts on this topic. – Sherlock Aug 27 '12 at 12:17
  • 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?. – UserEsp Aug 30 '16 at 17:50
6

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.

Jonathan
  • 8,497
  • 41
  • 35
  • 1
    This jsperf test shows how expensive the indirection of a template binding is. http://jsperf.com/knockout-template-binding-performance/2 – Michael R May 19 '13 at 05:31
  • RP Niemeyer made a blog post concerning this issue: http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3-all-bindings.html – Wet Noodles Oct 02 '13 at 12:54
  • 3
    Knockout 3.0 fixes this problem, incidentally: http://blog.stevensanderson.com/2013/07/09/knockout-v2-3-0-released-v3-0-0-beta-available/ – Jonathan Oct 30 '13 at 16:55
0

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

lighty
  • 87
  • 1
  • 1
  • 8