Продолжая тему Performance

Вот набор метрик, которые нужно отслеживать для получения идеального пользовательского опыта. Метрики разделены на 3 группы:

⚛️ React Native JS
⚙️ Native
📱 Device

⚛️ JS Frame Rate
Измеряет время выполнения кода в JS потоке (в Android Navigator использует этот поток).
Базовый уровень: Идеально - 60 FPS, Разумно - 30 FPS, Меньше 30 FPS (замедленное приложение).

⚛️ Navigation Render Time
1. Таймер стартует при нажатии на Touchable на экране A.
2. Переход на экран B.
3. Таймер останавливается, когда экран B полностью отрисован.

Базовый уровень:
- Простые приложения - до 0.3 сек (300 мс)
- Средние приложения - 0.3 до 1 сек
- Сложные приложения - до 1 сек

⚛️ Screen re-render Time
1. Таймер стартует при определенном UI событии (например, pull-to-refresh).
2. В процессе происходит обновление (например, сетевые запросы).
3. Таймер останавливается, когда экран снова полностью отрисован.

Базовый уровень: Стандарт - 60 FPS, Повышенный - 90 и 120, Пониженный - 30 FPS.

⚛️ Javascript Bundle Size
Базовый уровень:
- Малые и средние приложения: 4-6 MB или меньше
- Большие и сложные приложения: 6-10 MB или меньше

⚛️ UI Frame Rate (Main Thread)
Измеряет время для выполнения layout/UI отрисовки (NavigatorIOS использует этот поток, поэтому работает лучше чем Navigator для Android).

Базовый уровень: Идеально - 60 FPS, Разумно - 30 FPS, Меньше 30 FPS (замедленное приложение).

⚙️ Frame Drop
Задержка в отрисовке экранов (менее 60 fps).
Базовый уровень: 0 Frame Drops

⚙️ Slow Frame
Если приложение тратит больше 16.67 мс на кадр.
Базовый уровень: 0 Slow Frames

⚙️ Frozen Frame
UI кадры, занимающие более 700 мс.
Базовый уровень: 0 Frozen Frames

⚙️ TTI (Time-to-Interactive)
Время до интерактивности экрана/компонента.
Базовый уровень: 2-3 сек или меньше

📱App Stability / Crashes
Стабильность приложения измеряется количеством сбоев на сессию или пользователя.

📱ANRs (Application Not Responding)
Ошибка ANR возникает, когда основной поток приложения не отвечает более 5 секунд.
Базовый уровень: ANR = 0

📱App startup render time (App Launch Time)
1. Таймер стартует при запуске нативной части приложения.
2. Таймер останавливается, когда первый экран полностью отрисован.

Базовый уровень:
- Холодный старт: 2–4 сек
- Теплый старт: 2-3 сек
- Горячий старт: 1–1.5 сек

📱CPU Usage
Утилизация процессора показывает нагрузку на ядра для выполнения различных программ.

Базовый уровень:
- Идеально (без взаимодействия пользователя и фоновых задач) - ниже 5%
- Во время взаимодействия - ниже 20-30%
- Без продолжительных пиков до 100% (кратковременные пики допустимы)

📱Memory Usage
Использование памяти показывает средний процент занятости доступной памяти в данный момент.

Базовый уровень:
- При первом запуске - ниже 100MB
- В процессе использования - до 200-300MB
- Минимизировать утечки памяти

⚡️В следующем посте я расскажу какие инструменты использовать для получения этих метрик.

React Native World | Навигация по каналу