Привет, друзья! Давайте сравним показатели FPS, CPU, оперативной памяти и производительность GPU в популярных инструментах для мобильной разработки.

Предыстория

Команда мобильных разработчиков inVerita постоянно исследует производительность кроссплатформенных мобильных решений, доступных на рынке, дабы получить ответ на вопрос, какая технология лучше всего подходит для вашего продукта или карьеры, Flutter или React Native.

В этой статье мы решили исследовать производительность пользовательского интерфейса, который оказывает большое влияние на обычного пользователя мобильных приложений. Измерение производительности пользовательского интерфейса является сложной задачей, и для этого требуется, чтобы инженер реализовал одни и те же функции одинаковым образом на всех платформах. Мы выбрали GameBench в качестве глобального инструмента тестирования, чтобы не оставлять сомнений и оставаться объективными (это не отменяет того факта, что мы очень любим Flutter во многих аспектах :), но по-прежнему пилим множество проектов на React Native и Native).

С помощью GameBench нам удалось поместить каждое приложение в единую среду тестирования, что и было нашей целью. Исходный код лежит в опенсорсе, поэтому поэкспериментируйте и поделитесь с нами своими мыслями. В анимациях пользовательского интерфейса в основном используются разные инструменты на разных платформах, поэтому мы сузили все до библиотек, поддерживаемых каждой платформой (за исключением одного случая), или, по крайней мере, мы сделали все возможное для этого.

Результаты тестирования могут быть разными и зависеть от ваших подходов к реализации. Мы считаем, что вы, как потенциально настоящий эксперт в конкретных технологиях, можете довести свой набор инструментов до тех пределов, которые превзойдут наши показатели, и мы будем рады, если вы это сделаете. А теперь давайте посмотрим на полученные результаты.

Информация о Hardware:
Для целей тестирования мы использовали доступные по цене Xiaomi Redmi Note 5 и iPhone 6s.
Ссылка код

Пример 1 — сравнительный анализ в режиме просмотра списка

Мы реализовали один и тот же пользовательский интерфейс для Android и iOS на Native, React Native и Flutter. Мы также автоматизировали скорость прокрутки с помощью RecyclerView.SmoothScroller на Android. В iOS и React Native мы использовали подход с таймером и программной прокруткой до позиции. На Flutter мы использовали ScrollController для плавной прокрутки списка. В каждом случае у нас было 1000 элементов в представлении списка и одинаковое время прокрутки для достижения последнего элемента списка. В каждом из этих случаев мы использовали кэширование изображений с разными библиотеками для каждой платформы. Более подробную информацию можно найти в исходном коде.
Используемые сторонние библиотеки для загрузки и кеширования изображений :
iOS — Nuke
Android — Glide
React Native — React-native-fast-image

• Все тесты показали примерно одинаковый FPS.
• Android Native использует вдвое меньше памяти по сравнению с Flutter и React Native.
• React Native требует наиболее значительного использования ЦП. Причина в использовании JSBridge между JS и Native кодом, что приводит к трате ресурсов на сериализацию и десериализацию.
• Что касается эксплуатации аккумулятора, то лучший результат у Android. React-native отстает как от Android, так и от Flutter. Запуск непрерывной анимации потребляет больше заряда батареи в React Native.

Тесты на IPhone 6s

1. FPS. Результаты React Native хуже, чем у Flutter и Swift.
2. Объем памяти. Flutter почти соответствует естественному потреблению памяти, но по-прежнему больше нагружает процессор. React Native, в свою очередь, сильно отстает от Flutter.
3. Разница между Flutter и Swift. Flutter активно использует CPU, в то время как iOS Native использует GPU. Согласование во Flutter увеличивает нагрузку на ЦП.

Пример 2 — Тест на сложной анимации

В настоящее время большинство телефонов под Android и iOS имеют мощный hardware. В большинстве случаев при использовании обычных приложений падения fps не было, поэтому мы решили провести несколько тестов со сложной анимацией. Мы использовали векторные анимации, анимированные с помощью Lottie на Android, iOS, React Native, и адаптировали те же анимации для использования с Flare на Flutter.
Тестировали анимации с помощью Lottie для Android, iOS, React Native и Flare для Flutter.

Android

1. Android и React Native имеют схожую производительность. Это очевидно, потому что Lottie для React Native использует Native (16–19% ЦП, 30–29 кадров в секунду).
2. Результат Flutter достаточно интересный, хотя он немного облажался. (12% ЦП и 9 кадров в секунду).

Мы обнаружили, что удаление одной конкретной анимации из грида увеличивает FPS до 40% на Flutter. Мы предполагаем, что Flare не оптимизирован для такого рода задач, поэтому у Flutter такое падение FPS.
Во всем виноват:

3. Android требует меньше всего памяти (205 Мб); React Native требует 280 Мб, а Flutter — 266 Мб.
4. Холодный запуск приложения. По этому показателю лидирует Flutter (2 секунды). У Android Native и React Native это занимает около 4 секунд.

iOS

1. Результаты iOS и React Native в этом тесте почти такие же, как у Lottie для React Native.
2. Flare и Flutter не перестают удивлять.
3. iOS Native требует меньше всего памяти (48 Мб). React Native требует 135 Мб, а Flutter — 117 Мб;
4. Холодный запуск приложения. По этому показателю лидирует Flutter (2 секунды). Для iOS и React Native требуется около 10 секунд;

Обратите внимание: в случае с Flutter мы использовали другую библиотеку, которая намного “тяжелее” по сравнению с теми, которые мы использовали для других платформ, и это может быть причиной падения fps.

Пример 3 — Тестирование еще более сложных анимаций с проворотами, масштабированием и затуханием.

В этом тесте мы сравнили производительность при анимации 200-ста изображений. Масштабирование вращения и анимация затухания выполняются одновременно.

Android
1. Native показал максимальную производительность и максимально эффективное потребление памяти.
2.Flutter показал производительность, достаточную для комфортной работы, но в два раза больше затрат памяти по сравнению с Native.
3. React Native — в данном случае показал низкую производительность.

iOS
1.iPhone 6s достаточно мощный, чтобы допускать проседание fps.
2.Нативная версия использовала меньше ресурсов и чаще использовала графический процессор.
3.React Native использовал в основном CPU для рендеринга, тогда как Flutter использовал GPU.
4.React Native использовал немного больше памяти.

Заключение

Для обычных приложений с небольшой анимацией и блестящим внешним видом технология вообще не имеет значения. Но если вы собираетесь делать сложные анимации, имейте в виду, что Native обладает наибольшей производительностью для этого. Затем идут Flutter и React Native. Мы определенно не рекомендуем использовать React Native при очень сложных операциях с ЦП, в то время как Flutter отлично подходит для таких задач как с точки зрения ЦП, так и с точки зрения памяти.

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

Мы сталкиваемся с тем, что на реализацию и тесты каждой технологии может влиять множество факторов, и многие из вас, которые могут быть настоящими экспертами в конкретной платформе, могут выжать гораздо больше из любимого набора инструментов. Мы постарались сделать процесс максимально прозрачным, создав единую среду тестирования для каждого приложения и единый набор инструментов для измерения производительности, и я надеюсь, вам понравился результат.
Спасибо!

FlutterNativeReact