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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With