От автора: веб-производительность – большая и сложная тема. В этой статье мы обсудим отдельный аспект, в частности поговорим о 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 сетях? Возможно, нет.
Выбор самого лучшего фреймворка полностью зависит от требований проекта и команды. К счастью, представленные здесь графики дают пищу для размышления. До скорого, хорошо покодить…
Автор: John Hannah
Источник: //javascriptreport.com/
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.
