Mobil uygulamalarda Frame Rate — nedir, fps ve nasıl artırılır

Frame Rate Nedir

Frame Rate (kare hızı), saniye başına kare (fps) cinsinden ölçülen ve bir uygulamanın saniyede ekrandaki görüntüyü kaç kez güncellediğini gösteren bir metriktir. İnsan gözü hareketi 24 fps'den (sinema) itibaren akıcı olarak algılar, ancak etkileşimli bir kullanıcı arayüzü, dokunma ve animasyonların anında hissedilmesi için en az 60 fps gerektirir. Her kare tam bir döngüdür: kullanıcı girişinin işlenmesi, Düzen hesaplaması, Görünüm hiyerarşisinin işlenmesi ve ekrana çıktı. Bu aşamalardan herhangi biri ayrılan zaman bütçesini (60 fps'de 16,6 ms) aşarsa, kare atlanır ve kullanıcı takılma görür.

Uygulamanın Frame Rate'i ile ekranın yenileme hızı (Refresh Rate) arasında ayrım yapmak önemlidir. Yenileme hızı, ekranın bir donanım özelliğidir: ekranın saniyede fiziksel olarak görüntüyü kaç kez güncellediği (60, 90, 120 veya 144 Hz). Frame Rate, uygulamanın saniyede işleyebildiği kare sayısıdır. Uygulama 120 Hz'lik bir ekranda 60 fps üretiyorsa, her ikinci kare çoğaltılır — görüntü akıcı kalır ancak olabileceği kadar duyarlı olmaz. Google I/O 2023'e göre, modern amiral gemileri basit kullanıcı arayüzü senaryolarında 120 fps'yi koruyabilir, ancak ağır yük altında (oyunlar, karmaşık listeler) hız 40–60 fps'ye düşer.

Kare İşleme Nasıl Çalışır

Mobil uygulamalarda kare işleme, birkaç aşamadan oluşan bir boru hattından geçer. Android'de boru hattı şunları içerir: giriş işleme (Input), animasyon (Animation), ölçüm ve yerleşim (Layout), çizim (Draw), GPU senkronizasyonu ve ekran çıktısı (Swap). Her aşama CPU veya GPU'da yürütülür ve tüm aşamaların toplam süresi kare bütçesini aşmamalıdır. 60 fps için bütçe 16,6 ms, 120 fps için — 8,3 ms'dir. Choreographer (Android) ve CADisplayLink (iOS), işlemeyi ekranın dikey boşluk aralığı (VSync) ile senkronize ederek karenin yalnızca ekran yenileme anında çıkmasını sağlar ve yırtılmayı önler.

iOS'te boru hattı benzerdir: Run Loop olayları işler, Core Animation katmanları hesaplar, Render Server (ayrı bir süreç) işler ve kareyi GPU'ya gönderir. iOS'teki fark, işlemeyi ana uygulamadan ayıran özel Render Server sürecidir. Uygulama ana iş parçacığını bloke ederse, Render Server yine de bilinen son kareyi çizebilir, ancak animasyonlar durur. Render Server'ın kendisi yetişemezse — GPU boşta kalır ve Frame Rate düşer. Apple WWDC 2022'ye göre, iOS'te düşük Frame Rate'in en yaygın nedenleri aşırı CALayer iç içe geçmesi, ağır shadowPath ve ekran dışı işlemedir.

Choreographer ile Kare Takibi

Kotlin kodu Choreographer.FrameCallback'e abone olur ve kareler arasındaki gerçek zamanı günlüğe kaydeder. Aralık 16,6 ms'yi aşarsa, kaçırılan bir kare kaydedilir.

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)
    }
}

Ekran Yenileme Hızı ve Frame Rate

Yenileme Hızı (Refresh Rate), ekranın saniyede fiziksel olarak görüntüyü kaç kez yeniden çizdiğini belirleyen bir donanım özelliğidir. Standart ekranlar 60 Hz, modern amiral gemileri 90, 120 veya 144 Hz'dir. Uygulamanın Frame Rate'i yenileme hızından düşük, eşit veya yüksek olabilir (son durumda, fazla kareler atılır). İdeal senaryo, Frame Rate'in Refresh Rate ile eşleşmesidir: her donanım döngüsü uygulamadan yeni bir kare alır ve hareket maksimum düzeyde akıcı olur. Frame Rate düşükse, ekran son kareyi tekrarlar ve bu mikro takılma olarak algılanır.

Android ve iOS, dinamik yenileme hızı değiştirmeyi destekler. Android 12+ Smart Refresh Rate kullanır: kaydırma sırasında sistem hızı 120 Hz'ye yükseltir, statik içerikte pil tasarrufu için 60 Hz'ye düşürür. iOS ProMotion (iPhone 13 Pro ve daha yenisi) benzer şekilde çalışır — hız, içeriğe bağlı olarak 10 ila 120 Hz arasında değişir. Geliştirici, cihazın yüksek hızı destekleyip desteklemediğini kontrol etmeli ve kare başına zaman bütçesini uyarlamalıdır. Uygulama 8,3 ms (120 Hz için) içinde bir kare işleyemiyorsa, 60 Hz'yi zorlamak daha iyidir — bu, kaçırılan kare olmadan istikrarlı bir Frame Rate sağlayacaktır.

Frame Rate Ölçüm Araçları

Mobil uygulamalarda Frame Rate'i ölçmek için hem platformun yerleşik araçları hem de üçüncü taraf profilleyiciler mevcuttur. Android'de birincil araç, her kareyi aşamalara (Draw, Prepare, Process, Execute) göre ayrılmış bir zaman çizelgesi gösteren GPU Profiling'dir (Developer Options → Profile GPU Rendering). Daha ayrıntılı analiz Android Studio Profiler tarafından sağlanır — yeniden çizmeye neden olan belirli Görünümleri belirten tam bir işleme profili kaydeder. iOS'te, Core Animation şablonuyla Instruments kullanılır — FPS, katman işleme süresi ve ekran dışı işleme sayısını gösterir.

Üretimde Frame Rate izleme için Firebase Performance (Android) kullanılır — arka planda Frame Rate'i toplar ve cihaza, işletim sistemi sürümüne ve oturuma göre toplar. iOS'te MetricKit, MXAnimatoryMetric aracılığıyla benzer veriler sağlar. Oyunlar ve Flutter uygulamaları için FrameTimingCallback (Flutter) ve Unity Profiler kullanılır. Ortalama Frame Rate'i değil, yüzdelik dilimleri (P50, P90 ve P99) ölçmek önemlidir. Bir uygulama ortalama 55 fps gösterebilir ancak P99'u 30 fps olabilir — bu, zamanın %1'inde kullanıcıların şiddetli takılma gördüğü anlamına gelir ve bu olumsuz yorumlar için yeterlidir.

Flutter'da Frame Rate Ölçümü

Dart örneği, Flutter'da FrameTimingCallback'e nasıl abone olunacağını ve kaçırılan kare sayısının nasıl günlüğe kaydedileceğini gösterir. Geri çağırma, her tamamlanan kareden sonra tetiklenir.

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}");
    }
}

Kare Hızı Optimizasyonu

Frame Rate optimizasyonu, işleme boru hattındaki darboğazların belirlenmesiyle başlar. Düzen aşamasında ana sorunlar, Görünüm hiyerarşisinin aşırı iç içe geçmesi, göreli düzenlerin (birçok kurala sahip RelativeLayout) kullanımı ve sık requestLayout çağrılarıdır. Çözüm, ConstraintLayout veya düz bir hiyerarşi kullanmak ve 5–6 seviyeden fazla iç içe geçmekten kaçınmaktır. Draw aşamasında — overdraw: bir pikselin kare başına birden çok kez çizilmesi. Örneğin, yarı saydam bir parçanın altındaki beyaz Activity arka planı, altında başka bir katman daha — her piksel üç kez çizilir. Debug GPU Overdraw aracı, sorunlu alanları renk göstergesiyle gösterir. Overdraw'ın 2x veya daha düşük tutulması önerilir.

iOS'te ana sorunlar ağır cornerRadius ve masksToBounds'dur — Core Animation'ın geçici bir arabellek oluşturduğu, içine çizim yaptığı ve ardından sonucu ekrana kopyaladığı ekran dışı işlemeye neden olurlar. Ekran dışı işleme, Instruments Core Animation'da kolayca fark edilir: Renderer satırı kırmızıysa — sorun var demektir. Çözüm, cornerRadius yerine önceden kırpılmış görüntülerle UIImageView kullanmak, kesinlikle gerekli olmadıkça groupOpacity ve shouldRasterize'den kaçınmaktır. Her iki platform için de invalidate() ve setNeedsDisplay() çağrılarının sayısını en aza indirmek kritiktir — bu tür her çağrı, tam bir görünüm yeniden çizme döngüsünü tetikler.

Android'de Hiyerarşi Optimizasyonu

Kod, derin RelativeLayout iç içe geçmesinin düz bir ConstraintLayout yapısıyla değiştirilmesini gösterir. İç içe geçme seviyesini 4'ten 1'e düşürmek, Düzen süresini %30–50 oranında azaltır.

// Örnek: ConstraintLayout ile düz yapı
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
        // tüm kabı yeniden çizmeden veri bağlama
    }
}

Uyarlanabilir Frekanslar ve Dinamik Frame Rate

Modern mobil uygulamalar, mevcut senaryoya göre hedef frekansı dinamik olarak ayarlayan uyarlanabilir Frame Rate'i giderek daha fazla kullanmaktadır. Hızlı kaydırma, akıcılık için 120 fps gerektirirken, statik bir ekran yalnızca 60 fps veya video için 30 fps gerektirir. Android'de uyarlama, Choreographer.setFrameInterval (API 33+) ve Window.setFrameRate aracılığıyla uygulanır. Geliştirici tercih edilen bir frekans belirtebilir: SurfaceView'da setPreferredRefreshRate veya Window'da setFrameRate. iOS, frekansı ProMotion aracılığıyla otomatik olarak yönetir, ancak geliştirici CADisplayLink için preferredFramesPerSecond'ı açıkça ayarlayabilir.

Dinamik Frame Rate, özellikle oyunlar ve animasyonlu uygulamalar için önemlidir. Google'a göre, statik bir ekranda Frame Rate'i 120'den 60 Hz'ye düşürmek, GPU enerjisinin %30–40'ına kadar tasarruf sağlar. Akıcılık ve güç tüketimi arasında en iyi dengeyi sağlamak için şunlar önerilir: farklı senaryolarda gerçek Frame Rate'i ölçün, sahneye bağlı olarak hedef fps'yi ayarlayın (oyun — 60, menü — 30, video — 24) ve uygulama simge durumuna küçültüldüğünde arka planda 120 fps işlemek için kaynak israf etmemesi için Lifecycle-aware bileşenler aracılığıyla modları değiştirin.

Tercih Edilen Frame Rate'i Ayarlama

Swift kodu, iOS'te CADisplayLink için preferredFramesPerSecond'ı ayarlar. Kaydırma sırasında hız 120 Hz'ye yükselir, durduğunda 60 Hz'ye düşer.

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() {
        // animasyon güncellemesi
    }
}