Performance considerations in KnockoutJS

For web applications performance is an important factor to consider. In KnockoutJS when you do things in the wrong way this matters. We'll see some key areas you need to consider about performance in KnockoutJS. 

First lets look at fundemental building blocks of KnockoutJS application

observables
most basic fundamental building block. You need to have these

observableArrays

subscribers
get notifications when observable gets changed. You can dispose these. Also you delay them in case of expensive updates.

computed observables
Observables which depends on other observables

Bindings in KnockoutJS

visible binding
set display none based on the value. So shouldn't cost much.

for 10,000 elements inside a foreach, ko if takes around 10 seconds while visible binding only takes 1 second.

foreach
duplicates section of a markup for each array entry. Could be a normal array . 

if
bit expensive because, not like visible binding, if will hide the content which is inside the tag

    <div data-bind="if: check">
        <h1>Inject this to DOM if check is true</h1>
        <h2>Otherwise this won't exist in the DOM</h2>
    </div>

the visible binding just uses CSS to toggle the container element’s visiblity. The if binding, however, physically adds or removes the contained markup in your DOM, and only applies bindings to descendants if the expression is true.

with
creates a new binding context. it'll add descendent elements dynamically.

If the expression you supply involves any observable values, the expression will be re-evaluated whenever any of those observables change. Then, descendant elements will be cleared out, and a new copy of the markup will be added to your document and bound in the context of the new evaluation result.


click


value


checked


template


custom bindings