Frame Rate mobil ilovalarda — bu nima, fps va qanday oshirish

Frame Rate nima

Frame Rate (kadr chastotasi) — soniyadagi kadrlar (fps) bilan o‘lchanadigan metrika bo‘lib, ilova ekrandagi tasvirni soniyada necha marta yangilashini ko‘rsatadi. Inson ko‘zi harakatni 24 fps dan (kino) silliq deb qabul qiladi, ammo interaktiv UI uchun teginishlar va animatsiyalar bir zumda sezilishi uchun kamida 60 fps talab qilinadi. Har bir kadr to‘liq tsikldir: foydalanuvchi kiritishini qayta ishlash, Layout hisoblash, View iyerarxiyasini renderlash va ekranga chiqarish. Agar bosqichlardan birortasi ajratilgan vaqt byudjetidan (60 fps da 16.6 ms) oshib ketsa, kadr o‘tkazib yuboriladi va foydalanuvchi tutilishni ko‘radi.

Ilovaning Frame Rate ini displey yangilanish chastotasidan (Refresh Rate) farqlash muhim. Yangilanish chastotasi ekranning xarakteristikasidir: displey soniyada necha marta tasvirni fizik jihatdan yangilashi (60, 90, 120 yoki 144 Gts). Frame Rate — ilova soniyada necha kadr renderlay olishi. Agar ilova 120 Gts displeyda 60 fps bersa, har ikkinchi kadr takrorlanadi — tasvir silliq qoladi, lekin bo‘lishi mumkin bo‘lgan darajada sezgir bo‘lmaydi. Google I/O 2023 ma’lumotlariga ko‘ra, zamonaviy flagmanlar oddiy UI stsenariylarida 120 fps ni ushlab turishi mumkin, ammo og‘ir yuklarda (o‘yinlar, murakkab ro‘yxatlar) chastota 40–60 fps gacha tushadi.

Kadr renderingi qanday ishlaydi

Mobil ilovada kadr renderingi bir necha bosqichli konveyerdan o‘tadi. Androidda konveyer quyidagilarni o‘z ichiga oladi: kiritishni qayta ishlash (Input), animatsiya (Animation), o‘lchash va joylashtirish (Layout), chizish (Draw), GPU bilan sinxronlash va ekranga chiqarish (Swap). Har bir bosqich CPU yoki GPUda bajariladi va barcha bosqichlarning umumiy vaqti kadr byudjetidan oshmasligi kerak. 60 fps uchun byudjet 16.6 ms, 120 fps uchun — 8.3 ms. Choreographer (Android) va CADisplayLink (iOS) renderingni displeyning vertikal yangilanishi (VSync) bilan sinxronlaydi, kadr faqat ekran yangilanishi paytida chiqarilishini kafolatlaydi va tasvir yirtilishining (tearing) oldini oladi.

iOS da konveyer o‘xshash: Run Loop hodisalarni qayta ishlaydi, Core Animation qatlamlarni hisoblaydi, Render Server (alohida jarayon) renderlaydi va kadrni GPUga yuboradi. iOS ning farqi — renderingni asosiy ilovadan ajratadigan alohida Render Server jarayoni. Agar ilova asosiy oqimni bloklasa, Render Server baribir oxirgi ma’lum kadrni ko‘rsatishi mumkin, ammo animatsiyalar to‘xtaydi. Agar Render Serverning o‘zi ulgurmasa — GPU bo‘sh turadi va Frame Rate pasayadi. Apple WWDC 2022 ma’lumotlariga ko‘ra, iOS da past Frame Rate ning eng keng tarqalgan sabablari — CALayer ning haddan tashqari ichma-ich joylashuvi, og‘ir shadowPath va ekrandan tashqari rendering (offscreen rendering).

Choreographer orqali kadrlarni kuzatish

Kotlin kodida Choreographer.FrameCallback ga obuna bo‘linadi va kadrlar orasidagi haqiqiy vaqt qayd etiladi. Agar interval 16.6 ms dan oshsa — o‘tkazib yuborilgan kadr qayd etiladi.

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

Displey yangilanish chastotasi va Frame Rate

Refresh Rate (yangilanish chastotasi) — displeyning apparat xarakteristikasi bo‘lib, ekran soniyada necha marta tasvirni fizik jihatdan qayta chizishini belgilaydi. Standart displeylar 60 Gts, zamonaviy flagmanlar — 90, 120 yoki 144 Gts ga ega. Ilovaning Frame Rate i yangilanish chastotasidan past, teng yoki yuqori bo‘lishi mumkin (oxirgi holatda ortiqcha kadrlar tashlanadi). Ideal stsenariy — Frame Rate Refresh Rate bilan mos keladi: har bir apparat tsikli ilovadan yangi kadr oladi va harakat maksimal darajada silliq bo‘ladi. Agar Frame Rate pastroq bo‘lsa, displey oxirgi kadrni takrorlaydi, bu mikro-tutilishlar (stutter) sifatida qabul qilinadi.

Android va iOS yangilanish chastotasini dinamik almashtirishni qo‘llab-quvvatlaydi. Android 12+ Smart Refresh Rate dan foydalanadi: skrolling paytida tizim chastotani 120 Gts ga ko‘taradi, statik tarkibda batareyani tejash uchun 60 Gts ga tushiradi. iOS ProMotion (iPhone 13 Pro va undan yangilari) xuddi shunday ishlaydi — chastota tarkibga qarab 10 dan 120 Gts gacha o‘zgaradi. Dasturchi qurilma yuqori chastotani qo‘llab-quvvatlashini tekshirishi va kadr vaqti byudjetini moslashtirishi kerak. Agar ilova 8.3 ms da (120 Gts uchun) kadr renderlay olmasa, majburiy 60 Gts da ishlash yaxshiroq — bu o‘tkazib yuborilgan kadrlarsiz barqaror Frame Rate ni ta’minlaydi.

Frame Rate o‘lchash vositalari

Mobil ilovalarda Frame Rate ni o‘lchash uchun platformalarning o‘rnatilgan vositalari ham, uchinchi tomon profilerlari ham mavjud. Androidda asosiy vosita — GPU Profiling (Developer Options → Profile GPU Rendering) bo‘lib, u har bir kadrning bosqichlar bo‘yicha (Draw, Prepare, Process, Execute) vaqt shkalasini ko‘rsatadi. Batafsilroq tahlilni Android Studio Profiler taqdim etadi — qayta chizishga sabab bo‘layotgan aniq View larni ko‘rsatadigan to‘liq render profilini yozib oladi. iOS da Instruments Core Animation shabloni bilan ishlatiladi — FPS, qatlamlarni renderlash vaqti va ekrandan tashqari renderlar sonini ko‘rsatadi.

Ishlab chiqarishda Frame Rate monitoringi uchun Firebase Performance (Android) ishlatiladi — u Frame Rate ni fonda to‘playdi va qurilmalar, OT versiyalari va sessiyalar bo‘yicha jamlaydi. iOS da MetricKit MXAnimatoryMetric orqali o‘xshash ma’lumotlarni taqdim etadi. O‘yinlar va Flutter ilovalari uchun FrameTimingCallback (Flutter) va Unity Profiler ishlatiladi. O‘rtacha Frame Rate ni emas, balki persentillarni o‘lchash muhim: P50, P90 va P99. Ilova o‘rtacha 55 fps ni ko‘rsatishi mumkin, ammo P99 = 30 fps bo‘lishi mumkin — bu vaqtning 1% ida foydalanuvchilar kuchli tutilishlarni ko‘rishini anglatadi va bu salbiy sharhlar uchun yetarli.

Flutter da Frame Rate o‘lchash

Dart tilidagi misol Flutter da FrameTimingCallback ga obuna bo‘lishni va o‘tkazib yuborilgan kadrlar sonini qayd etishni ko‘rsatadi. Callback har bir tugallangan kadrdan keyin ishga tushadi.

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

Kadr chastotasini optimallashtirish

Frame Rate ni optimallashtirish render konveyeridagi tor joylarni aniqlash bilan boshlanadi. Layout bosqichida asosiy muammolar — View iyerarxiyasining haddan tashqari ichma-ich joylashuvi, nisbiy Layout lardan foydalanish (ko‘p qoidalarga ega RelativeLayout) va tez-tez requestLayout chaqiruvlari. Yechim — ConstraintLayout yoki tekis iyerarxiyadan foydalanish, 5–6 darajadan yuqori ichma-ichlikdan qochish. Draw bosqichida — qayta chizish (overdraw): piksel kadrda bir necha marta chizilganda. Masalan, yarim shaffof fragment ostidagi Activity ning oq foni, uning ostida yana bir qatlam — har bir piksel uch marta chiziladi. Debug GPU Overdraw vositasi muammoli zonalarni rang ko‘rsatkichlari bilan namoyish etadi. Overdraw ni 2x va undan past darajada ushlab turish tavsiya etiladi.

iOS da asosiy muammolar — og‘ir cornerRadius va masksToBounds — ular Core Animation vaqtinchalik bufer yaratadigan, ichiga chizadigan va natijani ekranga nusxalaydigan ekrandan tashqari renderingga (offscreen rendering) sabab bo‘ladi. Offscreen rendering ni Instruments Core Animation da osongina ko‘rish mumkin: agar Renderer chizig‘i qizil bo‘lsa — muammo bor. Yechim — cornerRadius o‘rniga oldindan kesilgan tasvirlar bilan UIImageView dan foydalanish, zaruratsiz groupOpacity va shouldRasterize dan qochish. Ikkala platforma uchun invalidate() va setNeedsDisplay() chaqiruvlari sonini minimallashtirish muhim — har bir bunday chaqiruv ko‘rinishni to‘liq qayta chizish siklini ishga tushiradi.

Android da iyerarxiyani optimallashtirish

Kod RelativeLayout ning chuqur ichma-ich joylashuvini ConstraintLayout tekis strukturasi bilan almashtirishni namoyish etadi. Ichma-ichlik darajasini 4 dan 1 gacha kamaytirish Layout vaqtini 30–50% qisqartiradi.

// Misol: ConstraintLayout orqali tekis struktura
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
        // ma’lumotlarni butun konteynerni qayta chizmasdan bog‘lash
    }
}

Adaptiv chastotalar va Dynamic Frame Rate

Zamonaviy mobil ilovalar tobora ko‘proq adaptiv Frame Rate — maqsadli chastotani joriy stsenariyga dinamik moslashtiradigan tizimdan foydalanmoqda. Tez skrolling paytida ro‘yxat silliqlik uchun 120 fps talab qiladi, statik ekranda 60 fps yoki hatto video uchun 30 fps yetarli. Android da moslashish Choreographer.setFrameInterval (API 33+) va Window.setFrameRate orqali amalga oshiriladi. Dasturchi tizimga afzal ko‘rilgan chastotani ko‘rsatishi mumkin: SurfaceView da setPreferredRefreshRate yoki Window da setFrameRate. iOS avtomatik ravishda ProMotion orqali chastotani boshqaradi, ammo dasturchi CADisplayLink uchun preferredFramesPerSecond ni aniq belgilashi mumkin.

Dinamik Frame Rate ayniqsa o‘yinlar va animatsiyali ilovalar uchun muhim. Google ma’lumotlariga ko‘ra, statik ekranda Frame Rate ni 120 dan 60 Gts ga tushirish GPU energiyasining 30–40% ini tejaydi. Silliqlik va energiya sarfi o‘rtasidagi eng yaxshi muvozanatga erishish uchun tavsiya etiladi: turli stsenariylarda haqiqiy Frame Rate ni o‘lchash, sahnaga qarab maqsadli fps ni belgilash (o‘yin — 60, menyu — 30, video — 24) va rejimlarni Lifecycle-aware komponentlar orqali almashtirish, shunda ilova kichraytirilganda fonda 120 fps renderlashga resurs sarflamasin.

Afzal ko‘rilgan Frame Rate ni sozlash

Swift dagi kod iOS da CADisplayLink uchun preferredFramesPerSecond ni o‘rnatadi. Skrolling paytida chastota 120 Gts ga ko‘tariladi, to‘xtaganda — 60 Gts ga tushadi.

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() {
        // animatsiya yangilanishi
    }
}