Angular vs Knockout on large lists

Question

JavaScript

Choosing between knockout and angular. In general, there are enough knockout opportunities. But the project is supposed to work with fairly large lists (thousands of elements). Wrote a small test to check how both libraries behave: jsfiddle.net/imbolc/z7bkz/8/embedded/result/

It turns out that on padding, knockout performance decreases non-linearly as the list grows: 100 elements ~ 40ms, 300 ~ 200ms, 500 ~ 1000ms, 1000 ~ 9000ms, 2000 ~ 80000ms. Angular behaves much more stable. Perhaps I wrote an incorrect test, I have almost no experience with both libraries. Please comment.

Answer 1

For Angular , you need to store dictionaries instead of numbers in an array, otherwise instead of the "update" test it will be "fill" , this is due to the fact that you cannot put an identifier in simple types and for angular a list with numbers will be like a new one every time, and instead of " update" first removes the DOM, and then "fill" . Corrected the test, improved "updating"
time for Angular.js , also added a test for Angular Light: jsfiddle.net/lega911/ZUne7

Answer 2

Here is your test slightly finished, with a few other libraries added: plnkr.co/edit/cTWetiNBorS8P2xcHhgm?p=preview

Answer 3

Not about performance, but still...

setTimeout(function () {
            callback();
        }, 0);

What is it? Why can't you write setTimeout(callback, 0) or even callback()?

Answer 4

Looks right. It seems that all the time is spent on the self.items.valueHasMutated() line, that is, really inside KnockoutJs. It's a pity…