Возьмем задачи разной сложности и сравним потребление памяти, FPS, загрузку CPU и GPU при запуске мобильных приложений, созданных с использованием разных технологий.
Фон
Мы постоянно изучаем производительность кроссплатформенных мобильных решений, доступных на рынке.Мы хотим знать, какая технология лучше всего подходит для разработки конкретного продукта.
В этой статье мы решили изучить производительность рендеринга графического интерфейса, которая имеет большое значение для пользователей мобильных приложений.
Говоря простым языком, любые тормоза будут видны невооруженным глазом.
Измерение производительности пользовательского интерфейса — сложная задача, требующая одинаковой реализации одинаковых функций на всех платформах.
В качестве инструмента тестирования мы использовали GameBench , чтобы быть уверенными в нашей объективности (это не меняет того факта, что мы очень любим Flutter и до сих пор делаем много проектов на React Native, а также занимаемся нативной разработкой).
Нам удалось поместить каждое приложение в единую тестовую среду.
Код имеет открытый исходный код, поэтому, если хотите, не стесняйтесь экспериментировать и делитесь с нами своими мыслями.
В анимации пользовательского интерфейса используются разные инструменты в зависимости от платформы, поэтому мы сузили область применения до библиотек, поддерживаемых каждой платформой (за исключением одного случая), или, по крайней мере, приложили все усилия, чтобы добиться этого.
Результаты тестирования могут различаться и зависеть от ваших подходов к реализации.
Мы будем уверены, что вы, как настоящий эксперт в конкретной технологии, сможете подобрать и настроить свой набор инструментов, который обеспечит лучшую производительность.
Мы будем рады, если вы сделаете это и расскажете нам, что произошло.
Об оборудовании
Для тестирования мы использовали Xiaomi Redmi Note 5 и iPhone 6s. Ссылка на репозиторий: Исходный кодТест 1. Просмотр списка
Мы реализовали один и тот же интерфейс изначально (на Android и iOS) в React Native и Flutter. Мы также автоматизировали скорость прокрутки с помощью RecyclerView.SmoothScroller на Android. В iOS и React Native мы использовали таймер и программную прокрутку.Во Flutter мы использовали ScrollController для плавной прокрутки списка.
В каждом случае у нас было 1000 элементов в списке, и столько же времени мы записывали на прокрутку до последнего элемента в списке.
В каждом из этих случаев мы использовали кэширование изображений с разными библиотеками для каждой платформы.
Более подробную информацию можно найти в исходный код .
Библиотеки для загрузки и кэширования изображений
iOS Андроид Реагировать нативный
К сожалению, тест не предоставляет результатов тестирования графического процессора для устройств Android. Мы пробовали разные, но увы.
Другие результаты тестов для Android
- Все тесты показали примерно одинаковый FPS.
- Android Native использует вдвое меньше памяти по сравнению с Flutter и React Native.
- React Native требует наибольшей загрузки процессора.
Причина — использование JS Bridge между JS и Native кодом, что приводит к потере ресурсов на сериализацию и десериализацию.
- Что касается времени автономной работы, Android Native показывает лучшие результаты.
React Native отстает как от Android, так и от Flutter. Запуск непрерывной анимации потребляет больше энергии аккумулятора в React Native.
Результаты тестов iPhone 6s
- FPS React Native работает хуже, чем Flutter и Swift. Причина в том, что компиляцию IoT нельзя использовать на iOS.
- Объем памяти.
Flutter сравним со Swift по потреблению памяти, но требует большей загрузки процессора.
В этом тесте React Native сильно отстает от Flutter и Swift.
- Flutter против Swift: Flutter интенсивно использует процессор, Swift — графический процессор.
Тест 2: Тяжелая анимация
В настоящее время большинство телефонов Android и iOS оснащены мощным оборудованием.В большинстве случаев при использовании обычных бизнес-приложений никаких падений FPS замечено не было.
Вот почему мы решили провести несколько тестов с тяжелой анимацией.
Для создания векторной анимации мы использовали Lottie для Android, iOS, React Native и Flare для Flutter: Лотти для Android, iOS, React Native И Вспышка для флаттера .
Результаты тестирования для Android
- Android Native и React Native сопоставимы по производительности.
Это очевидно, поскольку Lottie для React Native использует собственные вызовы (16–19% ЦП, 30–29 кадров в секунду).
- Результат Flutter удивил, хотя во время тестирования он немного подкачал (12% CPU и 9 FPS).
- Android Native требует наименьшего объема памяти (205 МБ); React Native требует 280 МБ, а Flutter — 266 МБ.
- Холодный запуск приложения.
По этому показателю лидирует Flutter (2 секунды).
Для Android Native и React Native это занимает около 4 секунд.
Мы предполагаем, что Flare тяжелый и недостаточно оптимизирован для такого рода задач.
Именно поэтому у Flutter было такое падение FPS.
Посмотри на это: 
Результаты тестирования для iOS
- Результаты iOS и React Native в этом тесте почти такие же, как у Lottie для React Native.
- Flare и Flutter не перестают удивлять.
Flare отлично справился с этим тестом!
- Нативный код для iOS здесь требует наименьшего объёма памяти (48 МБ).
React Native требует 135 МБ, а Flutter — 117 МБ;
- Холодный запуск приложения.
По этому показателю лидирует Flutter (2 секунды).
Для нативного кода iOS и React Native это занимает около 10 секунд.
Тест 3. Тяжелая анимация с поворотами, масштабированием и затуханием.
В этом тесте мы сравнили производительность анимации с 200 изображениями.
Вращение и масштабирование выполняются одновременно.
Результаты тестирования для Android
- Android Native показал высочайшую производительность и максимально эффективное потребление памяти.
- Flutter показал очень близкий к Native fps и вдвое большее потребление памяти, но все равно приличную производительность.
- React Native показал плохие результаты в этом тесте.
Результаты тестирования для iOS
- iPhone 6s достаточно мощный, чтобы предотвратить падение FPS во всех трёх случаях.
- Запуск собственного кода требовал меньше ресурсов, поскольку в основном использовался графический процессор.
- React Native в основном использовал процессор для рендеринга, а Flutter — графический процессор.
- Кроме того, React Native съел немного больше памяти.
Результаты теста
Для бизнес-приложений с обычной анимацией и красивым внешним видом выбор технологии разработки не важен.Но если вам нужна тяжелая анимация, имейте в виду, что в этом случае нативная разработка обеспечит лучшую производительность.
Далее идет Flutter, а затем React Native. Мы бы определенно не рекомендовали использовать React Native для задач, которые могут съедать много ресурсов процессора, тогда как Flutter отлично подходит для таких задач, как с точки зрения процессора, так и памяти.
Выбор инструмента зависит от конкретного изделия и ситуации.
Если вы хотите разработать MVP для одной платформы, вы можете выбрать нативную разработку, но имейте в виду, что Flutter позволяет создавать приложения как для мобильных устройств, так и для Интернета.
Так что, возможно, Flutter в ближайшем будущем станет лидером рынка кроссплатформенных разработок.
Уже сегодня Flutter является весьма достойным конкурентом нативным инструментам разработки, особенно если у вас небольшой бюджет на разработку, но вы все равно хотите обеспечить приемлемый уровень производительности приложений.
Существует множество факторов, влияющих на процесс разработки и стандарты для каждой технологии.
Мы постарались добиться максимальной прозрачности процесса, предоставив единую тестовую среду для каждого приложения и единый набор инструментов для измерения производительности.
В качестве рекламы
Нужный сервер для мобильного приложения ? Присмотритесь к нашему эпические серверы ! Это серверы с новейшими процессорами AMD EPYC! Максимальная конфигурация позволит разместить проект любой сложности — 128 ядер ЦП, 512 ГБ ОЗУ, 4000 ГБ NVMe.
Теги: #iOS #Android #Разработка для Android #Разработка мобильных приложений #react.js #react Native #flutter #native
-
Албанский
19 Oct, 24 -
10 Трендов Веб-Дизайна 2015 Года
19 Oct, 24 -
Мониторинг Данных Асу Тп И Многое Другое
19 Oct, 24 -
Глонасс Выходит На Ipo
19 Oct, 24
