Angular vs Knockout на больших списках

Question

[Imbolc]

Выбираю между knockout и angular. В целом возможностей нокаута хватает. Но в проекте предполагается работа с достаточно большими списками (тысячи элементов). Написал небольшой тест, чтобы проверить, как ведут себя обе библиотеки: jsfiddle.net/imbolc/z7bkz/8/embedded/result/

Получается, что на заполнении производительность нокаута нелинейно падает при увеличении списка: 100 элементов ~ 40ms, 300 ~ 200ms, 500 ~ 1000ms, 1000 ~ 9000ms, 2000 ~ 80000ms. Angular ведёт себя намного стабильнее. Возможно я написал некорректный тест, опыта работы с обоими библиотеками почти нет. Прокоментируйте, пожалуйста.

Answer 1

[Imbolc]

На stackoverflow подсказали, что этот эффект обусловлен странностью в последней версии Хрома. Решение тут: stackoverflow.com/questions/16520823/knockout-js-is-too-slow-in-filling-observablearray

Comments

[Kir ---]

Решил запустить все тесты в IE11, Angular провалился по времени очень значительно. Похоже Google в своём репертуаре, ориентируется лишь под свой браузер.

Answer 2

[lega]

Для Angular, в массиве нужно хранить словари вместо чисел, иначе вместо теста "update" будет "fill", это из-за того, что в простые типы нельзя поместить идентификатор и для ангулара список с числами будет каждый раз как новый, и вместо "update" сначала происходит удаление DOM, а потом "fill".
Поправил тест, для Angular.js улучилось время "updating", так же добавил тест для Angular Light:
jsfiddle.net/lega911/ZUne7

Answer 3

[lahmatiy]

Вот немного допиленный ваш тест, с добавлением нескольких других библиотек: plnkr.co/edit/cTWetiNBorS8P2xcHhgm?p=preview

Answer 4

[mayorovp]

Не по поводу производительности, но все же…

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

Что это? Почему нельзя написать setTimeout(callback, 0) или вообще callback()?

Comments

[Imbolc]

Нельзя, в angular dirty checking, то есть изменение переменных мониторится с некоторой периодичностью и отрисовывается. Без этого будет некорректно время замеряться, без отрисовки. В нокауте тоже без этого некорректно замеряется, не знаю почему.

[mayorovp]

Ну а setTimeout(callback, 0) почему нельзя написать было?

[Imbolc]

Можно, конечно, логи выводил вроде ещё там, потом удалил.

[sompylasar]

Нельзя, в angular dirty checking, то есть изменение переменных мониторится с некоторой периодичностью и отрисовывается.

Это не так. Не «с периодичностью», а только после кода, который мог изменить данные.

habrahabr.ru/post/165275/

Весь вопрос в том, когда производить эту проверку? Непрерывно, по таймеру? Учитывая, что модель данных может быть довольно сложной, то непрерывно производящиеся проверки могут сильно ухудшить UX. В Angular этот вопрос решается путем автоматического вызова функции $digest после каждого участка кода, предположительно могущего изменить данные. Это ключевой момент — проверка выполняется тогда и только тогда, когда данные могли быть изменены (например, при действии пользователя), и никогда не выполняется в других случаях. Если вы ожидаете изменения данных в какой-то другой момент времени (например, при поступлении события от сервера или завершении какого-либо процесса), вы должны явно указать Angular, что стоит выполнить проверку, вызвав функцию $apply.

Answer 5

[mayorovp]

Выглядит верно. Похоже, что все время тратится на строчке self.items.valueHasMutated(), то есть действительно внутри KnockoutJs. А жаль…

Comments

[Imbolc]

Спасибо :)

[mayorovp]

Да, кстати. Профайлера у меня нет, но зато есть стойкое ощущение, что основное время тратится на функции ko.utils.compareArrays, которая квадратичная.

Это так, о причинах…