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.

3
  • I have a number of tips to share, but no time. Will post tonight. Mar 29, 2012 at 14:47
  • @RPNiemeyer - Thanks Ryan. That would be great. Mar 29, 2012 at 15:07
  • 1
    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.
    – ShaneBlake
    Mar 29, 2012 at 15:50

3 Answers 3

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.

3
  • 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. Mar 30, 2012 at 11:31
  • 2
    Here and here are the latest posts on this topic.
    – Sherlock
    Aug 27, 2012 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, 2016 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.

3
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.