मोबाइल ऐप्स में फ्रेम रेट — यह क्या है, fps और इसे कैसे बढ़ाएं

फ्रेम रेट क्या है

फ्रेम रेट (फ्रेम दर) एक मीट्रिक है जो प्रति सेकंड फ्रेम (fps) में मापा जाता है और दिखाता है कि कोई एप्लिकेशन प्रति सेकंड कितनी बार स्क्रीन पर छवि अपडेट करता है। मानव आँख 24 fps (सिनेमा) से गति को सहज मानती है, लेकिन इंटरैक्टिव UI के लिए स्पर्श और एनिमेशन को तत्काल महसूस कराने हेतु कम से कम 60 fps की आवश्यकता होती है। प्रत्येक फ्रेम एक पूर्ण चक्र है: उपयोगकर्ता इनपुट प्रसंस्करण, लेआउट गणना, व्यू पदानुक्रम का रेंडरिंग और स्क्रीन पर आउटपुट। यदि कोई भी चरण आवंटित समय बजट (60 fps पर 16.6 मि॰से॰) से अधिक हो जाता है, तो फ्रेम छूट जाता है और उपयोगकर्ता हकलाहट देखता है।

एप्लिकेशन के फ्रेम रेट और डिस्प्ले की रिफ्रेश दर के बीच अंतर करना महत्वपूर्ण है। रिफ्रेश दर एक स्क्रीन विशेषता है: डिस्प्ले प्रति सेकंड कितनी बार छवि को भौतिक रूप से अपडेट करता है (60, 90, 120 या 144 Hz)। फ्रेम रेट यह है कि एप्लिकेशन प्रति सेकंड कितने फ्रेम रेंडर कर पाता है। यदि एप्लिकेशन 120 Hz डिस्प्ले पर 60 fps आउटपुट करता है, तो हर दूसरा फ्रेम डुप्लिकेट हो जाएगा — छवि सहज रहेगी लेकिन उतनी प्रतिक्रियाशील नहीं होगी जितनी हो सकती थी। Google I/O 2023 के अनुसार, आधुनिक फ्लैगशिप सरल UI परिदृश्यों में 120 fps बनाए रख सकते हैं, लेकिन भारी लोड (गेम, जटिल सूचियाँ) पर दर 40–60 fps तक गिर जाती है।

फ्रेम रेंडरिंग कैसे काम करती है

मोबाइल एप्लिकेशन में फ्रेम रेंडरिंग कई चरणों की पाइपलाइन से गुज़रती है। Android में, पाइपलाइन में शामिल हैं: इनपुट प्रसंस्करण (Input), एनिमेशन (Animation), माप और व्यवस्था (Layout), ड्राइंग (Draw), GPU सिंक्रनाइज़ेशन और स्क्रीन आउटपुट (Swap)। प्रत्येक चरण CPU या GPU पर निष्पादित होता है, और सभी चरणों का कुल समय फ्रेम बजट से अधिक नहीं होना चाहिए। 60 fps के लिए बजट 16.6 मि॰से॰ है, 120 fps के लिए — 8.3 मि॰से॰। Choreographer (Android) और CADisplayLink (iOS) डिस्प्ले के वर्टिकल ब्लैंकिंग इंटरवल (VSync) के साथ रेंडरिंग को सिंक्रनाइज़ करते हैं, यह सुनिश्चित करते हुए कि फ्रेम केवल स्क्रीन रिफ्रेश के क्षण में आउटपुट हो, टियरिंग से बचा जाए।

iOS में, पाइपलाइन समान है: Run Loop इवेंट प्रोसेस करता है, Core Animation लेयर्स की गणना करता है, Render Server (एक अलग प्रक्रिया) रेंडर करता है और फ्रेम को GPU भेजता है। iOS में अंतर समर्पित Render Server प्रक्रिया है, जो रेंडरिंग को मुख्य एप्लिकेशन से अलग करती है। यदि एप्लिकेशन मुख्य थ्रेड को ब्लॉक करता है, तब भी Render Server अंतिम ज्ञात फ्रेम खींच सकता है, लेकिन एनिमेशन रुक जाएंगे। यदि Render Server स्वयं गति नहीं रख पाता — तो GPU निष्क्रिय हो जाता है और फ्रेम रेट गिर जाता है। Apple WWDC 2022 के अनुसार, iOS में कम फ्रेम रेट के सबसे सामान्य कारण अत्यधिक CALayer नेस्टिंग, भारी shadowPath और ऑफस्क्रीन रेंडरिंग हैं।

Choreographer के माध्यम से फ्रेम ट्रैकिंग

Kotlin कोड Choreographer.FrameCallback की सदस्यता लेता है और फ्रेम के बीच वास्तविक समय लॉग करता है। यदि अंतराल 16.6 मि॰से॰ से अधिक है, तो छूटा हुआ फ्रेम दर्ज किया जाता है।

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

डिस्प्ले रिफ्रेश दर और फ्रेम रेट

रिफ्रेश दर डिस्प्ले की एक हार्डवेयर विशेषता है जो यह निर्धारित करती है कि स्क्रीन प्रति सेकंड कितनी बार छवि को भौतिक रूप से पुनः चित्रित करती है। मानक डिस्प्ले में 60 Hz होता है, आधुनिक फ्लैगशिप में 90, 120 या 144 Hz। एप्लिकेशन का फ्रेम रेट रिफ्रेश दर से कम, बराबर या अधिक हो सकता है (बाद वाले मामले में, अतिरिक्त फ्रेम त्याग दिए जाते हैं)। आदर्श परिदृश्य तब होता है जब फ्रेम रेट रिफ्रेश दर से मेल खाता है: प्रत्येक हार्डवेयर चक्र को एप्लिकेशन से एक नया फ्रेम मिलता है, और गति अधिकतम सहज होती है। यदि फ्रेम रेट कम है, तो डिस्प्ले अंतिम फ्रेम को दोहराता है, जिसे माइक्रो-हकलाहट के रूप में महसूस किया जाता है।

Android और iOS डायनामिक रिफ्रेश दर स्विचिंग का समर्थन करते हैं। Android 12+ Smart Refresh Rate का उपयोग करता है: स्क्रॉल करते समय सिस्टम दर को 120 Hz तक बढ़ाता है, स्थिर सामग्री पर बैटरी बचाने के लिए 60 Hz तक कम करता है। iOS ProMotion (iPhone 13 Pro और नए) समान रूप से काम करता है — सामग्री के आधार पर दर 10 से 120 Hz के बीच भिन्न होती है। डेवलपर को जाँचना चाहिए कि क्या उपकरण उच्च दर का समर्थन करता है और प्रति फ्रेम समय बजट को अनुकूलित करना चाहिए। यदि एप्लिकेशन 8.3 मि॰से॰ (120 Hz के लिए) में फ्रेम रेंडर नहीं कर सकता, तो 60 Hz को बाध्य करना बेहतर है — यह बिना छूटे फ्रेम के स्थिर फ्रेम रेट सुनिश्चित करेगा।

फ्रेम रेट मापने के उपकरण

मोबाइल एप्लिकेशन में फ्रेम रेट मापने के लिए प्लेटफ़ॉर्म के अंतर्निहित उपकरण और तृतीय-पक्ष प्रोफाइलर दोनों उपलब्ध हैं। Android में, प्राथमिक उपकरण GPU Profiling (Developer Options → Profile GPU Rendering) है, जो प्रत्येक फ्रेम की चरणों (Draw, Prepare, Process, Execute) में विभाजित समयरेखा दिखाता है। अधिक विस्तृत विश्लेषण Android Studio Profiler द्वारा प्रदान किया जाता है — यह पुनः ड्राइंग का कारण बनने वाले विशिष्ट व्यूज़ को इंगित करते हुए पूर्ण रेंडरिंग प्रोफ़ाइल रिकॉर्ड करता है। iOS में, Core Animation टेम्पलेट के साथ Instruments का उपयोग किया जाता है — यह FPS, लेयर रेंडरिंग समय और ऑफस्क्रीन रेंडर की संख्या दिखाता है।

उत्पादन फ्रेम रेट निगरानी के लिए, Firebase Performance (Android) का उपयोग किया जाता है — यह पृष्ठभूमि में फ्रेम रेट एकत्र करता है और उपकरण, OS संस्करण और सत्र के अनुसार समग्र करता है। iOS में, MetricKit MXAnimatoryMetric के माध्यम से समान डेटा प्रदान करता है। गेम और Flutter एप्लिकेशन के लिए, FrameTimingCallback (Flutter) और Unity Profiler का उपयोग किया जाता है। औसत फ्रेम रेट नहीं बल्कि प्रतिशतक मापना महत्वपूर्ण है: P50, P90 और P99। एक एप्लिकेशन औसत 55 fps दिखा सकता है लेकिन उसका P99 = 30 fps हो सकता है — इसका मतलब है कि 1% समय उपयोगकर्ता गंभीर हकलाहट देखते हैं, जो नकारात्मक समीक्षाओं के लिए पर्याप्त है।

Flutter में फ्रेम रेट मापना

Dart उदाहरण दिखाता है कि Flutter में FrameTimingCallback की सदस्यता कैसे लें और छूटे फ्रेम की संख्या कैसे लॉग करें। कॉलबैक प्रत्येक पूर्ण फ्रेम के बाद सक्रिय होता है।

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

फ्रेम दर का अनुकूलन

फ्रेम रेट अनुकूलन रेंडरिंग पाइपलाइन में अड़चनों की पहचान से शुरू होता है। लेआउट चरण में, मुख्य समस्याएँ अत्यधिक व्यू पदानुक्रम नेस्टिंग, रिलेटिव लेआउट (कई नियमों वाला RelativeLayout) का उपयोग और बार-बार requestLayout कॉल हैं। समाधान — ConstraintLayout या फ्लैट पदानुक्रम का उपयोग करना, 5–6 स्तरों से अधिक नेस्टिंग से बचना। Draw चरण में — overdraw: जब एक पिक्सेल प्रति फ्रेम कई बार खींचा जाता है। उदाहरण के लिए, एक अर्ध-पारदर्शी फ़्रैगमेंट के नीचे सफेद Activity पृष्ठभूमि, जिसके नीचे एक और परत — प्रत्येक पिक्सेल तीन बार खींचा जाता है। Debug GPU Overdraw उपकरण रंग संकेत के साथ समस्या क्षेत्र दिखाता है। overdraw को 2x या उससे कम रखने की अनुशंसा की जाती है।

iOS में, मुख्य समस्याएँ भारी cornerRadius और masksToBounds हैं — वे ऑफस्क्रीन रेंडरिंग का कारण बनते हैं, जहाँ Core Animation एक अस्थायी बफर बनाता है, उसमें चित्रित करता है, फिर परिणाम को स्क्रीन पर कॉपी करता है। Instruments Core Animation में ऑफस्क्रीन रेंडरिंग आसानी से देखी जा सकती है: यदि Renderer लाइन लाल है — समस्याएँ हैं। समाधान — cornerRadius के बजाय पूर्व-क्रॉप की गई छवियों वाला UIImageView उपयोग करना, जब तक अत्यंत आवश्यक न हो groupOpacity और shouldRasterize से बचना। दोनों प्लेटफ़ॉर्म के लिए, invalidate() और setNeedsDisplay() कॉल की संख्या को कम करना महत्वपूर्ण है — ऐसा प्रत्येक कॉल पूर्ण व्यू पुनः ड्राइंग चक्र शुरू करता है।

Android में पदानुक्रम अनुकूलन

कोड गहरी RelativeLayout नेस्टिंग को फ्लैट ConstraintLayout संरचना से बदलने का प्रदर्शन करता है। नेस्टिंग स्तर को 4 से घटाकर 1 करने से लेआउट समय 30–50% कम हो जाता है।

// उदाहरण: 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
        // पूरे कंटेनर को पुनः चित्रित किए बिना डेटा बाइंड करना
    }
}

अनुकूली आवृत्तियाँ और डायनामिक फ्रेम रेट

आधुनिक मोबाइल एप्लिकेशन तेजी से अनुकूली फ्रेम रेट का उपयोग कर रहे हैं — एक प्रणाली जो वर्तमान परिदृश्य के अनुसार लक्ष्य आवृत्ति को गतिशील रूप से समायोजित करती है। तेज़ स्क्रॉलिंग के लिए सहजता हेतु 120 fps की आवश्यकता होती है, जबकि स्थिर स्क्रीन को केवल 60 fps या वीडियो के लिए 30 fps की आवश्यकता होती है। Android में, अनुकूलन Choreographer.setFrameInterval (API 33+) और Window.setFrameRate के माध्यम से कार्यान्वित किया जाता है। डेवलपर पसंदीदा आवृत्ति निर्दिष्ट कर सकता है: SurfaceView में setPreferredRefreshRate या Window में setFrameRate। iOS ProMotion के माध्यम से स्वचालित रूप से आवृत्ति प्रबंधित करता है, लेकिन डेवलपर CADisplayLink के लिए preferredFramesPerSecond स्पष्ट रूप से सेट कर सकता है।

डायनामिक फ्रेम रेट विशेष रूप से गेम और एनिमेशन वाले एप्लिकेशन के लिए महत्वपूर्ण है। Google के अनुसार, स्थिर स्क्रीन पर फ्रेम रेट को 120 से 60 Hz तक कम करने से GPU ऊर्जा का 30–40% तक बचत होती है। सहजता और बिजली खपत के बीच सर्वोत्तम संतुलन प्राप्त करने के लिए अनुशंसा की जाती है: विभिन्न परिदृश्यों में वास्तविक फ्रेम रेट मापें, दृश्य के आधार पर लक्ष्य fps सेट करें (गेम — 60, मेनू — 30, वीडियो — 24), और Lifecycle-aware घटकों के माध्यम से मोड स्विच करें ताकि एप्लिकेशन छोटा होने पर पृष्ठभूमि में 120 fps रेंडर करने में संसाधन बर्बाद न करे।

पसंदीदा फ्रेम रेट सेट करना

Swift कोड iOS में CADisplayLink के लिए preferredFramesPerSecond सेट करता है। स्क्रॉल करते समय दर 120 Hz तक बढ़ जाती है, रुकने पर 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() {
        // एनिमेशन अपडेट
    }
}