В качестве испытуемых были выбраны:
- angular // v1.4.0
- ractivejs // v0.7.3
- riotjs // v2.1.0
- rivetsjs // v0.8.1
- vuejs // v0.11.10
MVVM фреймворки.
Данные - таблица 5000 элементов
https://yadi.sk/i/MvfBu_jahDwro
Проверялось:
1. стартовая отрисовка
2. отрисовка при изменении значения модели (two-way binding) [ввод в поле]
3. отрисовка при удалении записи [remove]
4. отрисовка при удалении произвольных 100 записей [remove random 100]
Тестирование производилось в ручном режиме (на глаз) в браузере Chrome последней версии с использованием секундомера. Время реакции ~ 300мс
Использовались только очевидные документированные возможности без хаков и ухищрений.
стартовая отрисовка- angular ~ 13.5 (сек)
- ractivejs ~ 16.5
- riotjs ~ 16.1
- rivetsjs < 16
- vuejs < 16
отрисовка при изменении значения модели- angular < 1 (сек) при условии, что размер таблицы не меняется
- ractivejs ~ 1.1 (сек) при условии, что размер таблицы не меняется
- riotjs < 1 (сек) при условии, что размер таблицы не меняется
- rivetsjs < 0.5 (сек) при условии, что размер таблицы не меняется
- vuejs < 0.5 (сек) при условии, что размер таблицы не меняется
отрисовка при удалении записи- angular ~ 3 (сек)
- ractivejs ~ 3.2
- riotjs ~ 1.5
- rivetsjs не удалось протестировать, т.к. не понял как биндить обработчики событий
- vuejs ~ 1
отрисовка при удалении произвольных 100 записей- angular ~ 3 (сек)
- ractivejs > 1 min, не дождался
- riotjs ~ 1.5
- rivetsjs не удалось протестировать, т.к. не понял как биндить обработчики событий
- vuejs ~ 1
Все примеры для тестов написаны лично мной в течении ~ 4ч., находятся
здесь
---
Послесловие
Изначально никакого бенчмарка не планировалось. Было любопытно:
1. скорость разработки новичка
2. удобство разработки
По скорости разработки (быстро-долго):
1. vuejs, ractivejs, angular,
2. rivetsjs
3. riotjs
т.к. у фреймворков под п.1,2 много коробочных решений, в т.ч. двусторонний биндинг
По обучаемости (быстро-долго):
1. vuejs, riotjs, ractivejs
2. rivetsjs (дока не очень)
3. angular