Flutter versus React Native: Srovnání výkonu a optimalizace

Proč řešit výkon u Flutteru a React Native

Flutter i React Native umožňují doručovat multiplatformní mobilní aplikace s nativním vzhledem a dojmem. Přestože oba přístupy sdílejí některé koncepty (hot reload, komponentový model, bohatý ekosystém), zásadně se liší v architektuře vykreslování, běhovém prostředí i způsobu volání nativních API. Cílem tohoto článku je srovnat výkonové charakteristiky z hlediska vstupní latence, plynulosti animací, propustnosti uživatelského rozhraní, startovacího času, paměťových nároků, velikosti binárky a nákladů na integraci nativních modulů – a navrhnout praktické optimalizační postupy pro obě technologie.

Architektura vykreslování a její dopad na výkon

Flutter: vlastní renderovací engine (Skia, nově Impeller pro Metal/Vulkan) vykresluje celé uživatelské rozhraní do plátna. Widgety jsou čistě deklarativní, ale výsledkem je strom elementů → RenderObject → rasterizace. Díky vlastnímu enginu Flutter obchází nativní widgety operačního systému a dosahuje konzistentního chování a předvídatelného frame pacingu.
React Native: historicky využíval bridge (JS <→ nativní), který převáděl JSON zprávy mezi světy. Nová architektura (Fabric + JSI + TurboModules) odstraňuje serializaci přes bridge, zrychluje synchronizační body a zlepšuje determinismus. RN renderuje skrze nativní primitiva (UIView/Android View), což přináší lepší adaptaci na platformu, ale větší heterogenitu výkonu.

Startovací čas (cold start) a warm start

Flutter: AOT kompilace Dart kódu snižuje interpretativní režii; cold start ovlivňuje inicializace engine a načtení shaderů. Impeller redukuje potřebu kompilace shaderů během běhu (nižší zadrhávání při prvních animacích).
React Native: s Hermes (optimalizovaný JavaScript engine) a pre-kompilovanými bytovými kódy klesají náklady na inicializaci a paměť. Fabric minimalizuje čas potřebný k vytvoření stromu nativních view. Přesto je cold start citlivější na velikost bundlu a lazy-loading modulů.

Plynulost UI: FPS, frame pacing a vstupní latence

Flutter cílí na 60/120 FPS s oddělením UI a raster threadu; pokud Dart kód blokuje UI thread, animace trpí. Impeller snižuje variabilitu renderování a stabilizuje frame pacing, zejména u složitých shaderů a maskování.
React Native: s Fabric/JSI a synchronním layoutem v C++ se snižuje režie při „commit“ fázi. Latence gest výrazně klesá, zejména při použití react-native-reanimated a Gesture Handler, které přesouvají část práce mimo JavaScript event loop.

Animace a gesta

Flutter: bohatý animační systém (tweeny, fyzikální simulace, implicitní/explicitní animace) běží deterministicky nad DPM (Dart UI). Výkon animací závisí na efektivitě rebuildů a rozumné granularitě widgetů.
React Native: Reanimated 2+ umožňuje tzv. worklets na UI threadu; animace tak nemusí čekat na JavaScript. U komplexních scén je výkon srovnatelný s Flutterem, pokud je minimalizován počet re-renderů.

Propustnost layoutu a složitost stromu

Flutter: layout probíhá v jednom grafu (měření/layout/paint) mimo nativní hierarchie. Výkon degraduje s hlubokými stromy a častými global keys. RepaintBoundary a AutomaticKeepAlive jsou klíčové pro izolaci a optimalizaci.
React Native: Fabric používá Yoga (Flexbox). Velmi široké a hluboké stromy mohou způsobit více průchodů layoutu; optimalizace zahrnují memoizaci (React.memo), rozumné zanoření a windowing seznamů.

Grafika, text a rasterizace

Flutter: Skia/Impeller poskytují silnou kontrolu nad textem, vektory, klipy, maskami a efekty; cena je větší velikost binárky a nutnost dbát na offscreen layers a kompozici.
React Native: spoléhá na nativní textový rendering a kompozici view, což znamená dobrý výchozí výkon pro standardní UI, ale vyšší náklady u extrémních efektů (custom canvas → Skia RN, OpenGL, nebo platformní kreslení).

Paměťová náročnost a GC

Flutter: Dart používá generational GC, který je rychlý, nicméně vytváření mnoha krátkodobých objektů v horké smyčce (např. v build()) může způsobit mikro-stutter; řešením je recyklace objektů a rozumná granularita widgetů.
React Native: Hermes má kompaktní reprezentaci objektů a efektivní GC; je třeba dbát na úniky paměti způsobené referenčními cykly mezi JavaScriptem a nativem a na velké in-memory seznamy bez windowingu.

Velikost binárky (APK/IPA) a doba stahování

Flutter: obsahuje vlastní engine a Skia/Impeller, což vede k větší základní velikosti, zejména u jednoduchých „hello world“ aplikací. Pro produkci je nutné využití R8/ProGuard (Android), bitcode/strip (iOS), kompresi assetů a rozdělení binárky per ABI.
React Native: velikost závisí na velikosti JavaScript bundlu a použitých nativních knihovnách; Hermes s bytovým kódem snižuje runtime náklady a někdy i celkovou velikost.

Volání nativních API a I/O

Flutter: platform channels pracují přes binární zprávy; režie je nízká při rozumné granularitě volání. Pro intenzivní streaming doporučujeme event channels nebo FFI s C/C++ knihovnami.
React Native: dříve bridge limitoval propustnost; JSI/TurboModules odstraňují serializaci, zlepšují latenci a umožňují přímé C++ bindingy. Pro I/O je vhodné využít background thread a řízení backpressure.

Vícevláknové zpracování a paralelismus

Flutter: Isolates slouží pro CPU-bound práci; komunikace probíhá přes porty (bez sdílené paměti). Raster a UI jsou oddělené; blokování hlavního isolate znamená ztrátu frame.
React Native: UI thread, render thread a JS thread; nová architektura umožňuje přesun části práce do C++/UI threadu (worklets), pro náročné výpočty doporučuje využívat nativní moduly.

Listy, virtualizace a nekonečné feedy

Flutter: k dispozici jsou ListView.builder, SliverList, SliverGrid a ScrollablePositionedList. U komplexních dlaždic využívejte const widgety, AutomaticKeepAlive a RepaintBoundary.
React Native: nabízí FlatList, SectionList s nastavením windowSize, getItemLayout a removeClippedSubviews. Plynulost závisí na správném klíčování, memoizaci item rendereru a stabilních referencích.

Profilování a diagnostika výkonu

Flutter: nabízí DevTools (timeline, statistiky rasterizeru, shader warmup), dart:developer (Timeline), příkaz flutter run –profile a tracing v Systrace.
React Native: využívá Flipper (network, layout, výkon), Hermes profiler, Systrace/Perfetto, react-devtools a nástroje pro Fabric/JSI.

Energetická efektivita (battery budget)

Flutter: stabilní frame pacing snižuje nepotřebné překreslování; je třeba dávat pozor na animace běžící na pozadí, časté volání setState a vysokou frekvenci timers.
React Native: minimalizujte zátěž JavaScriptové smyčky, používejte reanimated worklets a debounce. Preferujte nativní animace a přesun těžkých úloh do nativního kódu.

Modelové benchmarky a interpretace

UI microbench: zahrnuje 1) navigaci mezi obrazovkami, 2) scrollování 10 000 položek, 3) animace na 60 fps se stínem a ořezem. Sledujte percentily p95/p99 frame time, počet dropped frames, CPU/GPU čas a pauzy GC.
Start-up: měření cold/warm startu (TTI), inicializace modulů a načtení zdrojů. Vyhodnocujte také TBT (total blocking time) na úrovni JavaScriptu/Dartu.
I/O a bridge: test 1000 volání nativních API za sekundu; měřte latenci, jitter a CPU využití obou světů.

Optimalizační postupy pro Flutter

Aktivujte Impeller na iOS/Android, proveďte shader warmup pro často používané efekty.
Rozumně používejte const konstruktory, ValueListenableBuilder/Selector pro lokální rebuildy a RepaintBoundary u složitých podsestav.
Offsetujte CPU-bound práci na Isolates; u streamingového I/O použijte compute() či vlastní isolate.
Profilujte layout/paint/raster v DevTools a eliminujte přemalovávání (pomocí debug repaint rainbow).

Optimalizační postupy pro React Native

Přejděte na novou architekturu (Fabric + JSI + TurboModules) a používejte Hermes.
Animace implementujte přes react-native-reanimated a Gesture Handler; minimalizujte závislost na JavaScript event loopu.
Memoizujte komponenty (React.memo, useMemo, useCallback), stabilizujte props a klíče.
U dlouhých seznamů využijte windowing, getItemLayout a removeClippedSubviews.

Velké grafy, mapy a 3D

Flutter: pro náročné vizualizace využijte CustomPainter, SceneBuilder a případně FFI (C/C++). Mapy: doporučené jsou nativní integrace s platformními SDK přes platform channels.
React Native: pro graficky náročné scény použijte react-native-skia nebo WebGL/Vulkan bindingy; mapy zajišťujte přes nativní SDK s minimalizací prop-drillingu.

Stabilita frame pacingu vs. nativní vzhled

Flutter díky vlastnímu enginu nabízí velmi stabilní a konzistentní frame pacing napříč zařízeními; cenu představuje vyšší velikost balíčku a někdy „ne zcela nativní“ pocit u některých komponent (řešitelný pomocí Material/Cupertino/3rd party knihoven). React Native těží z nativních komponent a přirozených interakcí operačního systému, ale u heterogenních zařízení vyžaduje větší péči o performance tuning (zejména v minulosti s bridgem; Fabric většinu omezení výrazně zmírňuje).

Bezpečnost a sandbox výkonu

Flutter: FFI zvyšuje výkon tam, kde je třeba nativní knihovna; dbejte na thread safety a správu životního cyklu engine.
React Native: JSI C++ moduly umožňují psát výkonný kód blízko hardwaru; pozor na správu paměti a kompatibilitu mezi platformami.

Jak vybrat technologii z pohledu výkonu

Hodně animací, custom UI, konzistence na široké škále hardwaru: Flutter má výhodu díky vlastnímu renderingu a Impelleru.
Silná integrace s nativními view a knihovnami, „platform-first“ UX: React Native s Fabric a Hermes je skvělá volba, obzvlášť při využití reanimated.
Těžké výpočty: obě technologie vyžadují přesun do nativu/isolátů; výkonové rozdíly jsou více závislé na kvalitě implementace než samotném frameworku.

Antipatterny a časté chyby

Flutter: masivní rebuildy stromu kvůli změnám nadřazených InheritedWidget; absence RepaintBoundary; synchronní I/O na UI isolate; nadměrné používání GlobalKey.
React Native: časté volání setState bez memoizace; náročné operace na JavaScript threadu; velké JS bundly bez kódového dělení; spoléhání na starý bridge při vysoké frekvenci volání.

Roadmapa a budoucí směry

Flutter: další zlepšování Impelleru, menší zadrhávání v první fázi běhu, optimalizace pro 120 Hz a lepší interoperabilita s nativními pohledy.
React Native: konsolidace nové architektury, širší adopce TurboModules, hlubší integrace profilovacích nástrojů a snižování velikosti bundlu.