Від автора: веб-продуктивність – велика і складна тема. У цій статті ми обговоримо окремий аспект, зокрема поговоримо про front end JS фреймворках, а також про те, як один може працювати швидше іншого у вашому додатку. Ми будемо дивитися на два параметри: 1) скільки часу фреймворку необхідно на оновлення UI, 2) час, необхідний для завантаження і парсинг пакетів, необхідних для роботи фреймворка. Таким чином, визначимо найпопулярніші фреймворки JavaScript.
Моїм улюбленим ресурсом на цю тему останні пару років є js-framework-benchmark від Stefan Krause. Відмінний інструмент, але трохи складний. Легше дивитися на частину результатів. Цим ми і займемося сьогодні. Раджу ознайомитися з інструментом Stefan і пошукати інформацію самостійно. Особливо якщо вашого улюбленого фреймворку не буде в графіках нижче. Він може бути на сайті Stefan (він протестував 40+ фреймворків).
Попередження: «попередні Результати – використовуйте їх з обережністю (результати можу бути, наприклад, з різних версій браузерів).»
Ми вас попередили, тепер…
Давайте поглянемо на цифри
Перші результати відносяться до часу, необхідного фреймворкам на виконання різних операцій з великою таблицею – створення рядків, їх видалення і т. д. Важливо відзначити, що це ключові результати. Пояснення з сайту Stefan:
«Ключові реалізації створюють асоціацію між доменними даними та елементами DOM через присвоєння ключів key. Якщо дані змінюються, DOM елемент з цим key буде оновлено. Як наслідок, вставка і видалення елементів з масиву даних викликають відповідні зміни в DOM.»
На зображенні нижче чим більше число, тим повільніше фреймворк виконує завдання. Подивіться на нижню значення slowdown geometric mean – це показник загальної продуктивності і рейтинг фреймворків зліва направо. Самий лівий vanillajs (без фреймворків) працює як контрольна точка.
Як бачите, порівняння я включив найпопулярніші фреймворки і кілька менш відомих, але все ж цікаві. Preact (досить популярний) і Inferno мають API, схожим з React – тому я і додав їх. Ці два варіанти відмінно підійдуть, якщо ви працюєте в команді, використовує React, але створює додаток з сильним ухилом в бік продуктивності. Також зауважте, що ключові результати зазвичай будуть повільніше – на фреймворк покладено більше роботи.
Серед найпопулярніших фреймворків Vue виглядає дуже добре. Angular і React помітно повільніше, але їх значення майже однакові. З групи виділяється бібліотека Inferno. Автор Inferno, Dominic Gannaway, нещодавно перейшов працювати в Facebook в команду React.
Тепер подивимося неключевые результати:
Тут необхідно відзначити кілька моментів. По-перше, тестованих фреймворків менше, так як не для кожного фреймворку доступні неключевые результати. Також помітно, що результати трохи перемішані.
Vue показав себе повільніше всіх з групи, а Angular тепер найшвидший серед популярних фреймворків. Швидше за всіх виявився Svelte – цікавий фреймворк, який використовує інший підхід. Обов’язково спробуйте його.
Було б непростимо не згадати фреймворк, уделывающий всіх — Surplus від Adam Haile. Він лідирує як ключових, так і в неключових тестах. Є й інші досить швидкі фреймворки, серед яких petit-dom і dio. Я не став їх включати у графік вище, так як хотів перевірити найбільш популярних бібліотек/фреймворків. Якщо перейти до таблиці з результатами, відразу видно, що вона дуже велика і її потрібно вкоротити, щоб з нею було зручно працювати.
Дані запуску
Результати вище описували швидкість фреймворків при повному завантаженні сторінки і подальшим виконанням операцій з великою таблицею. Такі показники перевіряють фреймворки з іншого боку – час завантаження, парсинга і компіляції.
Ці вимірювання показують, скільки користувачеві доведеться чекати, перш ніж завантажувана сторінка стане робочої. В основному, чим більше JS завантажується, тим більше потрібно часу, а також тим більше коду, який браузер повинен розпарсити і скомпілювати.
Результати згруповані за ключовими і неключевым. Спочатку розберемо ключові результати:
Тут немає одного зручного значення, за яки
м відбувається ранжування. Загалом, якщо колір зелений, це добре, червоний – погано. І знову Inferno показав себе добре, як і Svelte і Preact. Серед найпопулярніших фреймворків Vue найшвидший, а Ember почервонів в самому кінці.
Тепер перейдемо до неключевым результатами:
У цій групі Svelte дуже швидкий і легкий. Загальна вага в байтах менше, ніж звичайний JS! Казав же, що фреймворк цікавий!
Заключні думки
Я вирішив написати цю статтю після прочитання The Cost of JavaScript від Addy Osmani майже місяць тому. Він поділився графіком, який мені дуже сподобався. Він показує, скільки часу необхідно на парсинг стисненого JS пакета вагою 250Кб (1Мб без стиснення) на різних мобільних пристроях порівняно з середньостатистичним телефоном (виділено). Сам графік:
Як вже говорив раніше, я давно стежу на бенчмарком Stefan і відразу пов’язав його роботу зі статтею Addy. Якщо нам важлива продуктивність, то в більшості випадків ми говоримо про мобільних пристроях. Найчастіше ці мобільні пристрої не такі потужні, як багато хто уявляє. Під багатьма я маю на увазі себе і, швидше за все, дуже багато інших людей.
Front end JS-фреймворки – витвір інженерного мистецтва. Вони складні й важкі. Іноді дуже важко підібрати правильний фреймворк під проект. Необхідно зважити багато компромісів.
Наприклад, фреймворк типу React має величезну екосистему, яка прискорить ваш проект за рахунок безлічі сторонніх бібліотек і відмінних ресурсів для навчання. Але підходить він проектом, який спрямований на користувачів на 2G мережах? Можливо, ні.
Вибір найкращого фреймворку повністю залежить від вимог проекту і команди. На щастя, представлені тут графіки дають поживу для роздумів. До скорого, добре покодить…
