Frame Rate în aplicațiile mobile — ce este, fps și cum să o îmbunătățești

Ce este Frame Rate

Frame Rate (frecvența cadrelor) — este o metrică măsurată în cadre pe secundă (fps) care arată de câte ori pe secundă aplicația actualizează imaginea pe ecran. Ochiul uman percepe mișcarea ca fiind fluidă de la 24 fps (cinema), dar pentru UI interactiv este necesar un minim de 60 fps pentru ca atingerile și animațiile să se simtă instantanee. Fiecare cadru este un ciclu complet: procesarea intrării utilizatorului, calcularea Layout, randarea ierarhiei View și afișarea pe ecran. Dacă oricare dintre etape depășește bugetul de timp alocat (16.6 ms la 60 fps), cadrul este pierdut și utilizatorul vede o sacadare.

Este important să distingem Frame Rate al aplicației de rata de reîmprospătare a display-ului (Refresh Rate). Rata de reîmprospătare este o caracteristică a ecranului: de câte ori pe secundă display-ul reîmprospătează fizic imaginea (60, 90, 120 sau 144 Hz). Frame Rate — este câte cadre pe secundă reușește să randere aplicația. Dacă aplicația produce 60 fps la un display de 120 Hz, fiecare al doilea cadru va fi duplicat — imaginea rămâne fluidă, dar nu la fel de receptivă cum ar putea fi. Conform Google I/O 2023, flagship-urile moderne pot menține 120 fps în scenarii UI simple, dar în sarcini grele (jocuri, liste complexe) frecvența scade la 40–60 fps.

Cum funcționează randarea cadrelor

Randarea unui cadru într-o aplicație mobilă trece printr-un pipeline format din mai multe etape. În Android pipeline-ul include: procesarea intrării (Input), animația (Animation), măsurarea și aranjarea (Layout), desenarea (Draw), sincronizarea cu GPU și afișarea pe ecran (Swap). Fiecare etapă se execută pe CPU sau GPU, iar timpul total al tuturor etapelor nu trebuie să depășească bugetul cadrului. Pentru 60 fps bugetul este de 16.6 ms, pentru 120 fps — 8.3 ms. Choreographer (Android) și CADisplayLink (iOS) sincronizează randarea cu baleiajul vertical al display-ului (VSync), garantând că un cadru este afișat doar în momentul reîmprospătării ecranului, evitând tearing-ul (ruperea imaginii).

În iOS pipeline-ul este similar: Run Loop procesează evenimentele, Core Animation calculează straturile, Render Server (un proces separat) randarează și trimite cadrul la GPU. Diferența iOS — procesul separat Render Server care izolează randarea de aplicația principală. Dacă aplicația blochează thread-ul principal, Render Server poate afișa în continuare ultimul cadru cunoscut, dar animațiile se vor opri. Dacă Render Server însuși nu reușește — GPU-ul rămâne inactiv și Frame Rate scade. Conform Apple WWDC 2022, cele mai frecvente cauze ale unui Frame Rate scăzut în iOS sunt înglobarea excesivă a CALayer, shadowPath grele și randarea în afara ecranului (offscreen rendering).

Urmărirea cadrelor prin Choreographer

Codul în Kotlin se abonează la Choreographer.FrameCallback și înregistrează timpul real între cadre. Dacă intervalul depășește 16.6 ms — se înregistrează un cadru pierdut.

class FrameRateMonitor {

    private var lastFrameTime = 0L
    private val frameCallback =
        Choreographer.FrameCallback { frameTimeNanos ->
            if (lastFrameTime != 0L) {
                val deltaMs = (frameTimeNanos - lastFrameTime) / 1_000_000f
                if (deltaMs > 16.6f) {
                    Log.w("FrameRate",
                        "Skipped frame: $deltaMs ms")
                }
            }
            lastFrameTime = frameTimeNanos
            Choreographer.getInstance()
                .postFrameCallback(this)
        }

    fun start() {
        Choreographer.getInstance()
            .postFrameCallback(frameCallback)
    }
}

Rata de reîmprospătare a display-ului și Frame Rate

Refresh Rate (rata de reîmprospătare) — este o caracteristică hardware a display-ului care determină de câte ori pe secundă ecranul redesenează fizic imaginea. Display-urile standard au 60 Hz, flagship-urile moderne — 90, 120 sau 144 Hz. Frame Rate al aplicației poate fi mai mic, egal sau mai mare decât rata de reîmprospătare (în ultimul caz, cadrele în exces sunt eliminate). Scenariul ideal — Frame Rate coincide cu Refresh Rate: fiecare ciclu hardware primește un nou cadru de la aplicație, iar mișcarea este maxim de fluidă. Dacă Frame Rate este mai mic, display-ul repetă ultimul cadru, ceea ce este perceput ca micro-sacadări (stutter).

Android și iOS suportă comutarea dinamică a ratei de reîmprospătare. Android 12+ folosește Smart Refresh Rate: la derulare sistemul ridică frecvența la 120 Hz, la conținut static o reduce la 60 Hz pentru economisirea bateriei. iOS ProMotion (iPhone 13 Pro și mai noi) funcționează similar — frecvența variază între 10 și 120 Hz în funcție de conținut. Dezvoltatorul trebuie să verifice dacă dispozitivul suportă frecvența înaltă și să adapteze bugetul de timp per cadru. Dacă aplicația nu reușește să randere un cadru în 8.3 ms (pentru 120 Hz), este mai bine să forțeze lucrul la 60 Hz — acest lucru va asigura un Frame Rate stabil fără cadre pierdute.

Instrumente de măsurare a Frame Rate

Pentru măsurarea Frame Rate în aplicațiile mobile sunt disponibile atât instrumentele integrate ale platformelor, cât și profilere externe. În Android, instrumentul principal este GPU Profiling (Developer Options → Profile GPU Rendering) care afișează scala temporală a fiecărui cadru cu defalcare pe etape (Draw, Prepare, Process, Execute). O analiză mai detaliată este oferită de Android Studio Profiler — înregistrează profilul complet de randare cu indicarea View-urilor specifice care cauzează redesenearea. În iOS se utilizează Instruments cu șablonul Core Animation — arată FPS, timpul de randare a straturilor și numărul de randări în afara ecranului.

Pentru monitorizarea Frame Rate în producție se folosește Firebase Performance (Android) — colectează Frame Rate în fundal și îl agregă pe dispozitive, versiuni de OS și sesiuni. În iOS MetricKit furnizează date similare prin MXAnimatoryMetric. Pentru jocuri și aplicații Flutter se utilizează FrameTimingCallback (Flutter) și Unity Profiler. Este important să se măsoare nu Frame Rate-ul mediu, ci percentilele: P50, P90 și P99. O aplicație poate afișa o medie de 55 fps, dar poate avea P99 = 30 fps — aceasta înseamnă că 1% din timp utilizatorii văd sacadări puternice, iar acest lucru este suficient pentru recenzii negative.

Măsurarea Frame Rate în Flutter

Exemplul în Dart arată cum să te abonezi la FrameTimingCallback în Flutter și să înregistrezi numărul de cadre pierdute. Callback-ul se declanșează după fiecare cadru finalizat.

import 'package:flutter/scheduler.dart';

class FrameRateLogger {
    int totalFrames = 0;
    int missedFrames = 0;

    void start() {
        SchedulerBinding.instance
            .addTimingsCallback(_onReportTimings);
    }

    void _onReportTimings(List<FrameTiming> timings) {
        for (final timing in timings) {
            totalFrames++;
            if (timing.totalSpan()
                > Duration(milliseconds: 16)) {
                missedFrames++;
            }
        }
        debugPrint("FPS: \${totalFrames - missedFrames}");
    }
}

Optimizarea frecvenței cadrelor

Optimizarea Frame Rate începe cu identificarea blocajelor în pipeline-ul de randare. În etapa Layout, problemele principale sunt înglobarea excesivă a ierarhiei View, utilizarea Layout-urilor relative (RelativeLayout cu multe reguli) și apelurile frecvente la requestLayout. Soluția — utilizarea ConstraintLayout sau a unei ierarhii plate, evitarea înglobării de peste 5–6 niveluri. În etapa Draw — redesenearea (overdraw): când un pixel este desenat de mai multe ori per cadru. De exemplu, fundalul alb al Activity sub un fragment semitransparent, sub care se află un alt strat — fiecare pixel este desenat de trei ori. Instrumentul Debug GPU Overdraw arată zonele problematice prin indicatoare colorate. Se recomandă menținerea overdraw-ului la nivelul 2x sau mai jos.

În iOS, problemele principale sunt cornerRadius grele și masksToBounds — cauzează randarea în afara ecranului (offscreen rendering), în care Core Animation creează un buffer temporar, desenează în el, apoi copiază rezultatul pe ecran. Offscreen rendering-ul este ușor de observat în Instruments Core Animation: dacă linia Renderer este roșie — există probleme. Soluția — utilizarea UIImageView cu imagini decupate în prealabil în loc de cornerRadius, evitarea groupOpacity și shouldRasterize fără necesitate strictă. Pentru ambele platforme este crucial să se minimizeze numărul de apeluri invalidate() și setNeedsDisplay() — fiecare astfel de apel declanșează un ciclu complet de redeseneare a vizualizării.

Optimizarea ierarhiei în Android

Codul demonstrează înlocuirea înglobării profunde a RelativeLayout cu o structură plată ConstraintLayout. Reducerea nivelului de înglobare de la 4 la 1 scurtează timpul Layout cu 30–50%.

// Exemplu: structură plată prin ConstraintLayout
class OptimizedView(context: Context) :
    ConstraintLayout(context) {

    private val binding =
        ItemProfileBinding.inflate(
            LayoutInflater.from(context)
        )

    fun bind(user: User) {
        binding.avatar.setImageURI(user.avatarUrl)
        binding.nameText.text = user.name
        // legarea datelor fără redesenearea întregului container
    }
}

Rate adaptive și Dynamic Frame Rate

Aplicațiile mobile moderne folosesc din ce în ce mai mult Frame Rate adaptiv — un sistem care ajustează dinamic frecvența țintă în funcție de scenariul curent. La derularea rapidă, lista necesită 120 fps pentru fluiditate, la ecranul static sunt suficienți 60 fps sau chiar 30 fps pentru video. În Android, adaptarea se realizează prin Choreographer.setFrameInterval (API 33+) și Window.setFrameRate. Dezvoltatorul poate indica sistemului frecvența preferată: setPreferredRefreshRate în SurfaceView sau setFrameRate în Window. iOS gestionează automat frecvența prin ProMotion, dar dezvoltatorul poate seta explicit preferredFramesPerSecond pentru CADisplayLink.

Dynamic Frame Rate este deosebit de important pentru jocuri și aplicații cu animații. Conform datelor Google, reducerea Frame Rate de la 120 la 60 Hz pe un ecran static economisește până la 30–40% din energia GPU. Pentru a obține cel mai bun echilibru între fluiditate și consumul de energie, se recomandă: măsurarea Frame Rate-ului real în diferite scenarii, setarea fps-ului țintă în funcție de scenă (joc — 60, meniu — 30, video — 24) și comutarea modurilor prin componente conștiente de ciclul de viață, astfel încât aplicația să nu consume resurse pentru randarea a 120 fps în fundal când este minimizată.

Setarea Frame Rate-ului preferat

Codul în Swift setează preferredFramesPerSecond pentru CADisplayLink în iOS. La derulare frecvența crește la 120 Hz, la oprire — scade la 60 Hz.

class AdaptiveFrameRateManager {

    private var displayLink: CADisplayLink?

    func startWithHighRate() {
        displayLink = CADisplayLink(
            target: self,
            selector: #selector(step)
        )
        if #available(iOS 15.0, *) {
            displayLink?.preferredFrameRateRange =
                CAFrameRateRange(
                    minimum: 60,
                    maximum: 120,
                    preferred: 120
                )
        }
        displayLink?.add(to: .current,
            forMode: .common)
    }

    @objc
    private func step() {
        // actualizare animație
    }
}