Показать сообщение отдельно
  #64 (permalink)  
Старый 12.06.2015, 23:08
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Тесты производительности фреймворков
В качестве испытуемых были выбраны:
  • 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
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием