Knockout is a UI framework for building single page apps. In Knockout, observable and observableArray are two basic functions. Observable enables two-way binding between the UI and the data in View Model.

ObservableArray stores a collection of View Models. When a View Model is added or removed from the array, the bindings are re-evaluated. And the UI is re-rendered. Most of the array operations are supported. For example, the push function adds elements to the collection.

There are performance problems with the above code. For each new iteration, the UI is recomputed. And the UI renders again. Repetitive push operation is computation intensive and leads to performance problems.

Recently, I was working with a collection of 1000 elements. Pushing items, one by one, took about seven seconds.

There is a work-around. Insert all the items into an array. Finally, set the array to the observableArray as a final step.

With the same 1000 item array, the above operation completed in 400 ms.

Performance problems in Knockout have a common theme. There are unnecessary re-renders.

Update (September 2017): There is a CodeMentor article that does a performance comparison between React, Angular and Knockout. The test inserts 1000 items into an array. And the benchmark test took 400 ms to run.

Performance problems using Knockout observableArray
Tagged on: