Самые быстрые и популярные JavaScript фреймворки

Самые быстрые и популярные JavaScript фреймворки

От автора: веб-производительность – большая и сложная тема. В этой статье мы обсудим отдельный аспект, в частности поговорим о 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 (без фреймворков) работает как контрольная точка.

Самые быстрые и популярные JavaScript фреймворки

Как видите, в сравнение я включил самые популярные фреймворки и несколько менее известных, но все же интересных. Preact (довольно популярен) и Inferno обладают API, схожим с React – поэтому я и добавил их. Эти два варианта отлично подойдут, если вы работаете в команде, использующей React, но создающей приложение с сильным уклоном в сторону производительности. Также заметьте, что ключевые результаты обычно будут медленнее – на фреймворк возложено больше работы.

Среди самых популярных фреймворков Vue выглядит чертовски хорошо. Angular и React заметно медленнее, но их значение почти одинаковые. Из группы выделяется библиотека Inferno. Автор Inferno, Dominic Gannaway, недавно перешел работать в Facebook в команду React.

Теперь посмотрим неключевые результаты:

Самые быстрые и популярные JavaScript фреймворки

Здесь необходимо отметить несколько моментов. Во-первых, тестируемых фреймворков меньше, так как не для каждого фреймворка доступны неключевые результаты. Также заметно, что результаты немного перемешаны.

Vue показал себя медленнее всех из группы, а Angular теперь самый быстрый среди популярных фреймворков. Быстрее всех оказался Svelte – интересный фреймворк, использующий другой подход. Обязательно попробуйте его.

Было бы непростительно не упомянуть фреймворк, уделывающий всех — Surplus от Adam Haile. Он лидирует как в ключевых, так и в неключевых тестах. Есть и другие довольно быстрые фреймворки, среди которых petit-dom и dio. Я не стал их включать в график выше, так как хотел проверить больше самых популярных библиотек/фреймворков. Если перейти к таблице с результатами, сразу видно, что она слишком большая и ее нужно укоротить, чтобы с ней было удобно работать.

Данные запуска

Результаты выше описывали скорость фреймворков при полной загрузке страницы и последующим выполнением операций с большой таблицей. Следующие показатели проверяют фреймворки с другой стороны – время загрузки, парсинга и компиляции.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Эти измерения показывают, сколько пользователю придется ждать, прежде чем загружаемая страница станет рабочей. В основном, чем больше JS загружается, тем больше времени требуется, а также тем больше кода, который браузер должен распарсить и скомпилировать.

Результаты сгруппированы по ключевым и неключевым. Сначала разберем ключевые результаты:

Самые быстрые и популярные JavaScript фреймворки

Здесь нет одного удобного значения, по которому происходит ранжирование. В общем, если цвет зеленый, это хорошо, красный – плохо. И опять Inferno показал себя хорошо, как и Svelte и Preact. Среди самых популярных фреймворков Vue самый быстрый, а Ember покраснел в самом конце.

Теперь перейдем к неключевым результатам:

Самые быстрые и популярные JavaScript фреймворки

В этой группе Svelte очень быстрый и легкий. Общий вес в байтах меньше, чем обычный JS! Говорил же, что фреймворк интересный!

Заключительные мысли

Я решил написать эту статью после прочтения The Cost of JavaScript от Addy Osmani почти месяц назад. Он поделился графиком, который мне очень понравился. Он показывает, сколько времени необходимо на парсинг сжатого JS пакета весом 250Кб (1Мб без сжатия) на разных мобильных устройствах по сравнению со среднестатистическим телефоном (выделен). Сам график:

Самые быстрые и популярные JavaScript фреймворки

Как уже говорил ранее, я давно слежу на бенчмарком Stefan и сразу связал его работу со статьей Addy. Если нам важна производительность, то в большинстве случаев мы говорим о мобильных устройствах. Зачастую эти мобильные устройства не такие мощные, как многие представляют. Под многими я имею в виду себя и, скорее всего, очень много других людей.

Front end JS фреймворки – произведение инженерного искусства. Они сложны и трудны. Иногда очень сложно подобрать правильный фреймворк под проект. Необходимо взвесить много компромиссов.

Например, фреймворк типа React имеет огромную экосистему, которая ускорит ваш проект за счет множества сторонних библиотек и отличных ресурсов для обучения. Но подходит ли он проекту, который направлен на пользователей на 2G сетях? Возможно, нет.

Выбор самого лучшего фреймворка полностью зависит от требований проекта и команды. К счастью, представленные здесь графики дают пищу для размышления. До скорого, хорошо покодить…

Автор: John Hannah

Источник: https://javascriptreport.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree