Flutter против React Native — тест производительности

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

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

Приложения для бенчмарков

В бенчмарк попали три типа приложений:

1. Большой список из 1001 элемента: Каждый элемент включает статичное изображение и бесконечно вращающееся изображение.
2. Массовые анимации изображений: 200 изображений одновременно вращаются, выцветают и масштабируются.
3. Массовые анимации Lottie: 36 анимаций Lottie, отображаемых на одном экране.

Методология теста

• Каждый бенчмарк проводился на компьютере M1 Mac.
• Приложения тестировались на устройствах OnePlus 7 и Pixel, работающих на Android.
• Использование памяти и процессора измерялось с помощью Android Profiler при запуске релизного apk (минифицированный apk для React Native).
• FPS измерялся в profile mode для приложения Flutter и в сборке с отключенной минификацией JS и отключенным dev-режимом для React Native. (Поскольку статистика производительности RN поддерживается только при запуске с использованием metro bundler).
• Вот исходный код бенчмарка: https://github.com/nateshmbhat/flutter-rn-performance-benchmarks

Используемые версии фреймворка :

• React Native: 0.74.1
• Flutter: 3.19.5
• Dart: 3.3.3
• DevTools: 2.31.1

Производительность просмотра списка

Flutter:

• FPS: 60 (без джанка, неравномерностей)
• Использование кучи памяти Dart: 7-8 МБ
• Размер APK: 16,8 МБ (7,6 секунд на сборку)
• Память процесса: 120-130 МБ (не изменилась при прокрутке)
• CPU: 5-8% (не изменилось при прокрутке)
• Никаких неравномерностей или фреймдропа даже при быстрой прокрутке

React Native:

• FPS: 50-55 (заметный джанк)
• Размер APK: 21,9 МБ (23 секунды на сборку)
• Память: 160 МБ (без прокрутки), 180-190 МБ (с прокруткой)
• CPU: 11-13% (без прокрутки), до 25-30% (при прокрутке)
• Время от времени при прокрутке пропадают кадры и появляются пустые элементы

Flutter прокручивался плавно, без скачков памяти и процессора во время прокрутки, в то время как React Native демонстрировал падения кадров и значительные скачки в нагрузке на процессор и память.

Массовые анимации изображений

Flutter:

• FPS: 58-60
• Куча Dart: 13,4 МБ
• Размер APK: 11,6 МБ (19,6 секунд на сборку)
• Память: 128-135 МБ
• CPU: 8%

React Native:

• FPS: 58-60 (с периодическими падениями)
• Размер APK: 21 МБ (20 секунд на сборку)
• Память: 380-396 МБ
• CPU: 12-16%

Оба фреймворка работали с похожей частотой кадров, но в React Native наблюдалось падение FPS при перезапуске анимации и значительно большее использование памяти.

Массовые анимации Lottie

Flutter:

• FPS: 36
• Размер APK: 7,6 МБ (20,8 секунд на сборку)
• Память: 220 МБ
• CPU: 11%

React Native:

• FPS: 43
• Размер APK: 18,5 МБ (23 секунды на сборку)
• Память: 240 МБ
• CPU: 22%

Интересно, что в этом тесте React Native превзошел Flutter по FPS, но при этом использовал больше процессора и памяти.

Дополнение: В новости о недавнем релизе Flutter 3.22 указано, что для движка рендеринга Impeller производительность рендеринга Lottie значительно улучшилась. В этом бенчмарке используется Flutter 3.19.5. Мне еще предстоит провести этот бенчмарк для новой версии наAndroid.

Сравнение стартовых проектов

Мы неожиданно обнаружили, что для стартового проекта размер Apk для React Native значительно больше, чем для приложения на Flutter.

Хотя этот конкретный случай не совсем корректен (учитывая, что оба стартовых приложения отличаются друг от друга) и может быть исключен как результат сравнения производительности, он дает несколько интересных наблюдений.

Обратите внимание, что время создания приложения в React Native больше, так как при создании нового проекта загружается вся библиотека react-native, в то время как Flutter SDK нужно загрузить еще до создания приложения.

Окончательный вердикт

Все бенчмарки показывают, что размеры APK у Flutter меньше, а использование процессора и памяти незначительно лучше, чем у React Native.

Источник