Native vs Flutter vs React Native: тестируем производительность в работе с UI-элементами

Автор оригинала: inVerita
  • Перевод
Давайте возьмём задачи разной сложности и сравним потребление памяти, FPS, загрузку CPU и GPU при работе мобильных приложений, созданных с помощью разных технологий.


Предыстория


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

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

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

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

О железе


Для тестовых целей мы использовали Xiaomi Redmi Note 5 и iPhone 6s.

Ссылка на репозиторий: Source code

Тест 1: List view


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

Библиотеки для загрузки и кэширования изображений


iOS


Android


React Native


image

К сожалению, бенчмарк не выдаёт результаты GPU тестов для Android-устройств. Мы пробовали разные, но увы.


Остальные результаты тестов для Android


  1. Все тесты показали примерно одинаковый FPS.
  2. Android Native использует вдвое меньше памяти по сравнению с Flutter и React Native.
  3. React Native требует наибольшего использования процессора. Причина заключается в использовании JS Bridge между JS и Native code, что приводит к потере ресурсов на сериализацию и десериализацию.
  4. Что касается эксплуатации батареи, Android Native имеет лучший результат. React Native отстаёт как от Android, так и от Flutter. Запуск непрерывной анимации потребляет больше энергии аккумулятора на React Native.

Результаты тестов для iPhone 6s



  1. FPS. У React Native результаты хуже, чем у Flutter и Swift. Причина заключается в невозможности использования IoT-компиляции на iOS.
  2. Объём памяти. Flutter сопоставим со Swift в плане потребления памяти, но сильнее грузит процессор. В этом тесте React Native сильно отстаёт от Flutter и Swift.
  3. Flutter vs Swift: Flutter активно использует CPU, Swift активно использует GPU.

Тест 2: Тяжелая анимация


В настоящее время большинство телефонов, работающих на Android и iOS, имеют мощное железо. В большинстве случаев, при использовании обычных бизнес-приложений, не было замечено никаких падений FPS. Вот почему мы решили провести несколько тестов с тяжёлой анимацией. Для создания векторной анимации мы использовали Lottie для Android, iOS, React Native и Flare — для Flutter:

Lottie for Android, iOS, React Native и Flare for Flutter.




Результаты тестов для Android


  1. Android Native и React Native сопоставимы по производительности. Это очевидно, потому что Lottie для React Native использует нативные вызовы (16–19% CPU, 30–29 FPS).
  2. Результат Flutter удивил, хотя он немного облажался во время тестирования (12% CPU и 9 FPS).
  3. Android Native требует наименьшего объёма памяти (205 Мб); React Native требует 280 Мб, а Flutter — 266 Мб.
  4. Холодный старт приложения. По этому показателю Flutter является лидером (2 секунды). Для Android Native и React Native он занимает около 4 секунд.

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

Посмотрите на это:


Результаты тестов для iOS


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

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

Тест 3: Тяжеленная анимация с вращениями, масштабированием и фейдингом


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

image


Результаты тестов для Android


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


Результаты тестов для iOS


  1. iPhone 6s достаточно мощный, чтобы не допустить падения FPS во всех 3 случаях.
  2. Работа нативного кода потребовала меньше ресурсов, так как в основном использовался GPU.
  3. React Native для рендеринга в основном использовал процессор, а Flutter использовал GPU.
  4. Кроме того, React Native съел немного больше памяти.

Итоги тестирования


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

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

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



На правах рекламы


Нужен сервер для мобильного приложения? Присмотритесь к нашим эпичным серверам! Это серверы с новейшими процессорами AMD EPYC! Максимальная конфигурация позволит разместить проект любой сложности — 128 ядер CPU, 512 ГБ RAM, 4000 ГБ NVMe.

VDSina.ru — хостинг серверов
Серверы в Москве и Амстердаме

Комментарии 23

    +4

    Странно, что нет сравнения с Web вариантом.

      0
      Почему вы не иcпользовали реализацию Lottie для Flutter?
        +3
        Это перевод, нужно у автора оригинальной статьи спрашивать.
          +1
          Ну справедливости ради, rive.app (бывш. flare) на флатере всеже пока заметно лучше и чаще используется.

          Еще будут работы по отображению нативных интерфейсов во флатере, так что еще не вечер и лотти себя еще покажет.
            0
            На своём опыте могу сказать, что пришлось отказаться от Flare и рисовать на чистом Flutter, так как подал FPS на топовом устройстве если много элементов.
            0
            Спасибо за ссылку, я видел до этого только fluttie
            0
              0

              И конечно же я не смог пройти мимо так, чтобы не реализовать то же самое на $mol: https://mol.js.org/perf/dopes/-/


              React — 470 Dopes/s
              Native JS — 2000 Dopes/s
              $mol — 2700 Dopes/s

              +1
              Спасибо за статью!
              Почему не включен NativeScript в рассмотрение?
                0
                Александр, к сожалению, не могу Вам ответить на данный вопрос т.к. данная статья является переводом. Автор решил рассматривать только указанные в материале платформы.
                  0

                  Автор скорее всего не добавил NS из-за того что он не пользуется популярностью.

                  +2

                  Странно что не догрузили тесты, чтобы они были не так близко к 60 кадрам, потому что 59 кадров в секунду кажется, что упирается в лимит частоты обновления экрана.

                    +4
                    Тест 3: Тяжеленная анимация с вращениями, масштабированием и фейдингом
                    2. Flutter показал очень близкий к Native fps и вдвое больший расход памяти, но всё же приличную производительность.

                    Простите, что??? 19 и 58 — это очень близкие fps? Это же почти 3 раза! не говоря уже о том, что 19 fps сильно не комфортно для пользователя.
                      0
                      Пара нюансов.

                      — Для Android React Native обычный JSC, не Hermes. Даже переход на v8 заметно сокращает потребляемую память. Так что по Android RN точно может выдать более высокие цифры.

                      — Flutter был 1.17 на iOS с рендерингом через Metal или более старой версии?
                        +1

                        Очень странный тест. Имело смысл делать более реалистичные вещи — зум, размытие, листание, плавные переходы, прокрутку текстов, использование разных стилей одновременно.


                        А здесь какие-то веб-страницы из 2000-х, что здесь можно вообще протестировать? Работу с 2D-графикой?

                          0
                          Побольше бы таких сравнений.
                          Будут ли еще подобные статьи?
                            0
                            Постараемся побольше такого контента публиковать ;)
                            0

                            Круто, давно не делали таких тестов.
                            Мне интересно, я какой-то особенный? Потому что у меня на моем Redmi Note 5 все Flutter приложения подфрижевуют и имеют просадки по ФПСу (особенно при смене темы или скролле ListView), когда Native и React Native почти всегда 60, даже в самых загруженных вьюхах.

                              0
                              Вы наверное запускаете в дебаг режиме, он значительно медленней.
                                0
                                нет, в релизе. скажем так, там не совсем все ужасно но фпс до 40, бывает, просаживается.
                                  0
                                  Странно, надо на код смотреть.
                                    0
                                    пустой список из документации так же лагает, я все протестил
                                    мб моя мобила какая-то не такая, я надеюсь на это
                                      0
                                      Ну мы делаем довольно таки нагруженную апку и списки довольно таки сложные и все работаем даже в дебаге хорошо. Очень странно. Тестю на таких слабых девайсах как МИ А1 и Нексус 5. Остальное полу флагманы и флагманы.

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                            Самое читаемое