обновление: обновил график
предисловие
Как разработчик JavaScript, вы, возможно, столкнулись с рядом фреймворков и даже освоили один или два из них. Раньше я предпочитал фреймворки, это облегчало мою разработку. Но после стольких замечательных концептуальных изменений во внешнем интерфейсе, от Virtual-DOM до управления состоянием, я также думаю о производительности самого фреймворка и накладных расходах на различные типы операций.Эта статья Сравнение производительности основных фреймворков будут выполнены, и различия в производительности между ними будут суммированы.
Использование: MacBook Pro 15 (i7 2,5 ГГц, 16 ГБ ОЗУ, OSX 10.13.1, Chrome 62.0.3202.94 (64-разрядная версия))
Фреймворки, которые будут воспроизводиться
- vanillajs - Существование Господа Бога, вездесущая и всемогущая структура, широко используемая при разработке различных основных веб-сайтов.
- реагировать - Сын Facebook, он всегда утверждал, что ему меньше 15 лет. Когда все думали, что у него нет надежды дорасти до одного года, он внезапно вырос до пятнадцати лет.
- angularJS - Старший сын отца Google, хотя и поддерживается до сих пор, но из-за рождения младших братьев популярность уже не так хороша, как раньше
- угловатый
- vue -
Таинственная сила с Востока, восходящая звезда фреймворка, но его всегда будут сравнивать с вышеперечисленными фреймворками, формируя главную драму фронтенд-развлекательного круга.
В случае использования КЛЮЧА
Когда вы связываете элементы DOM с данными, данные изменяются, а ключи обновляются.
(Представление данных: среднее мс ± отклонение мс (относительно самого быстрого кратного))
| Тестовые задания | vanillajs | vue-v2.5.3 | angular-v5.0.0 | react-v16.1.0 | angular-v1.6.3 |
|---|---|---|---|---|---|
|
создать строку: Создайте 1000 строк контента после загрузки страницы. |
137.8±9.9(1.0) | 169.2±3.6(1.2) | 185.7±7.8(1.3) | 201.2±12.1(1.5) | 222.9±8.1(1.6) |
|
обновить строку: Обновите содержимое всех 1000 строк. |
155.7±5.4(1.0) | 161.8±3.9(1.0) | 179.3±6.5(1.2) | 169.0±4.3(1.1) | 232.3±8.7(1.5) |
|
Частичное обновление: Обновить содержимое строк, кратных десяти, в таблице с 10 000 строк |
76.5±4.8(1.0) | 168.1±7.4(2.3) | 73.5±4.9(1.0) | 90.9±3.3(1.2) | 87.1±5.3(1.2) |
|
выбрать строку: Время, когда мышь щелкает строку, чтобы выделить |
10.8±3.5(1.0) | 9.8±2.5(1.0) | 7.6±4.0(1.0) | 12.4±4.1(1.0) | 10.0±4.7(1.0) |
|
поменять строку: Поменять местами две строки в таблице из тысячи строк |
18.3±4.6(1.0) | 19.0±2.8(1.0) | 118.5±2.8(6.5) | 121.8±4.2(6.7) | 125.9±5.3(6.9) |
|
удалить строку: удалить строку |
43.1±1.6(1.0) | 52.5±1.8(1.2) | 46.1±2.6(1.1) | 51.5±2.0(1.2) | 48.6±2.5(1.1) |
|
Создать несколько строк: Создайте 10000 строк контента |
1,374.5±33.3(1.0) | 1,521.4±55.7(1.1) | 1,682.0±53.1(1.2) | 2,033.7±32.0(1.5) | 2,112.0±77.7(1.5) |
|
дополнительная линия: Добавить 1000 строк в таблицу с 10000 строками |
217.4±7.3(1.0) | 338.4±10.3(1.6) | 257.6±11.1(1.2) | 271.8±9.9(1.3) | 371.6±60.4(1.7) |
|
пустая строка: Очистить содержимое таблицы с 10 000 строк |
177.1±10.2(1.0) | 240.9±11.4(1.4) | 360.3±16.4(2.0) | 224.4±6.0(1.3) | 517.8±62.0(2.9) |
Время начала
| Тестовые задания | vanillajs | vue-v2.5.3 | angular-v5.0.0 | react-v16.1.0 | angular-v1.6.3 |
|---|---|---|---|---|---|
| Время запуска при бездействии процессора и сети | 38.8±2.9(1.0) | 55.4±1.6(1.4) | 97.4±3.5(2.5) | 58.4±1.1(1.5) | 96.9±23.9(2.5) |
| Время, необходимое для загрузки всех скриптов во фреймворке | 4.0±0.3(1.0) | 20.8±0.7(1.3) | 45.9±1.6(2.9) | 22.1±0.6(1.4) | 56.8±18.4(3.6) |
| Время, потраченное на основной поток (стиль, макет и т. д.) | 162.1±2.6(1.0) | 174.2±2.5(1.1) | 216.8±4.6(1.3) | 176.9±2.3(1.1) | 224.0±52.1(1.4) |
| Общий размер (в байтах) всех ресурсов, передаваемых по сети | 163,967.0(1.0) | 227,410.0(1.4) | 304,139.0(1.9) | 263,076.0(1.6) | 337,157.0(2.1) |
С точки зрения времени запуска очевидно, что vue и react быстрее, поскольку у братьев angular относительно большой фреймворк, загрузка скрипта, время запуска, размер скрипта и т. д. не так хороши, как у других фреймворков.
использование памяти
| Тестовые задания | vanillajs | vue-v2.5.3 | angular-v5.0.0 | react-v16.1.0 | angular-v1.6.3 |
|---|---|---|---|---|---|
| Использование памяти после загрузки страницы | 3.0±0.1(1.0) | 3.6±0.1(1.2) | 6.7±0.1(2.2) | 3.7±0.1(1.2) | 4.3±0.1(1.4) |
| Использование памяти после добавления 1000 строк | 3.7±0.1(1.0) | 7.2±0.0(2.0) | 10.5±0.0(2.9) | 7.6±0.0(2.1) | 11.9±0.0(3.2) |
| Объем памяти для обновления кратных 10 строк в 1000 строк | 3.7±0.1(1.0) | 7.3±0.0(2.0) | 10.6±0.0(2.9) | 8.5±0.0(2.3) | 11.9±0.0(3.2) |
| Использование памяти после замены 1000 строк контента 5 раз | 3.6±0.1(1.0) | 7.3±0.0(2.0) | 10.8±0.0(3.1) | 9.0±0.0(2.5) | 12.4±0.0(3.5) |
| Использование памяти после создания 1000 строк контента 5 раз | 3.2±0.0(1.0) | 3.8±0.0(1.2) | 7.1±0.0(2.2) | 4.7±0.0(1.5) | 4.7±0.0(1.5) |
Суммировать
Видно, что vanillajs выигрывает во всех аспектах.Если вы хотите получить лучшую оптимизацию производительности, это не просто выбор фреймворка. Также необходимо подумать о том, как лучше использовать vanillajs, подумать об операциях, близких к браузеру, и подумать о логике из принципа обновления фреймворка, чтобы получить лучшую производительность.
Источники данных:js-framework-benchmark