معدل الإطارات في التطبيقات المحمولة — ما هو، fps وكيفية تحسينه

ما هو معدل الإطارات

معدل الإطارات هو مقياس يُقاس بعدد الإطارات في الثانية (fps) ويوضح عدد المرات في الثانية التي يقوم فيها التطبيق بتحديث الصورة على الشاشة. تدرك العين البشرية الحركة على أنها سلسة بدءًا من 24 إطارًا في الثانية (السينما)، ولكن واجهة المستخدم التفاعلية تتطلب 60 إطارًا في الثانية على الأقل لتكون اللمسات والرسوم المتحركة فورية. كل إطار هو دورة كاملة: معالجة إدخال المستخدم، حساب التخطيط، عرض التسلسل الهرمي للعرض، والإخراج إلى الشاشة. إذا تجاوزت أي من هذه المراحل الميزانية الزمنية المخصصة (16.6 مللي ثانية عند 60 إطارًا في الثانية)، يتم تخطي الإطار ويرى المستخدم تقطيعًا.

من المهم التمييز بين معدل الإطارات الخاص بالتطبيق ومعدل تحديث الشاشة. معدل التحديث هو خاصية للشاشة: عدد المرات في الثانية التي تقوم فيها الشاشة بتحديث الصورة فعليًا (60 أو 90 أو 120 أو 144 هرتز). معدل الإطارات هو عدد الإطارات في الثانية التي يتمكن التطبيق من عرضها. إذا كان التطبيق ينتج 60 إطارًا في الثانية على شاشة 120 هرتز، فسيتم تكرار كل إطار ثانٍ — ستبقى الصورة سلسة ولكنها لن تكون بنفس الاستجابة. وفقًا لـ Google I/O 2023، يمكن للهواتف الرائدة الحديثة الحفاظ على 120 إطارًا في الثانية في سيناريوهات واجهة المستخدم البسيطة، ولكن تحت الحمل الثقيل (الألعاب والقوائم المعقدة) ينخفض المعدل إلى 40–60 إطارًا في الثانية.

كيف يعرض الإطارات

يمر عرض الإطارات في التطبيقات المحمولة عبر خط أنابيب من عدة مراحل. في Android، يشمل خط الأنابيب: معالجة الإدخال (Input)، والرسوم المتحركة (Animation)، والقياس والترتيب (Layout)، والرسم (Draw)، والمزامنة مع GPU والإخراج إلى الشاشة (Swap). يتم تنفيذ كل مرحلة على CPU أو GPU، ويجب ألا يتجاوز الوقت الإجمالي لجميع المراحل ميزانية الإطار. لمعدل 60 إطارًا في الثانية الميزانية 16.6 مللي ثانية، ولـ 120 إطارًا في الثانية — 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 هرتز، والهواتف الرائدة الحديثة لها 90 أو 120 أو 144 هرتز. يمكن أن يكون معدل الإطارات للتطبيق أقل من أو مساويًا أو أعلى من معدل التحديث (في الحالة الأخيرة، يتم التخلص من الإطارات الزائدة). السيناريو المثالي هو عندما يتطابق معدل الإطارات مع معدل التحديث: تتلقى كل دورة أجهزة إطارًا جديدًا من التطبيق، وتكون الحركة سلسة إلى أقصى حد. إذا كان معدل الإطارات أقل، تكرر الشاشة آخر إطار، وهو ما يُدرك على أنه تقطيع دقيق.

يدعم Android و iOS التبديل الديناميكي لمعدل التحديث. يستخدم Android 12+ Smart Refresh Rate: أثناء التمرير يرفع النظام التردد إلى 120 هرتز، وفي المحتوى الثابت يخفضه إلى 60 هرتز لتوفير البطارية. يعمل iOS ProMotion (iPhone 13 Pro والأحدث) بطريقة مماثلة — يتراوح التردد من 10 إلى 120 هرتز حسب المحتوى. يجب على المطور التحقق مما إذا كان الجهاز يدعم معدل التحديث العالي وتكييف الميزانية الزمنية لكل إطار. إذا كان التطبيق لا يمكنه عرض إطار خلال 8.3 مللي ثانية (لـ 120 هرتز)، فمن الأفضل فرض 60 هرتز — سيضمن ذلك معدل إطارات ثابتًا بدون إطارات مفقودة.

أدوات قياس معدل الإطارات

تتوفر كل من الأدوات المضمنة للمنصات وأدوات التنميط التابعة لجهات خارجية لقياس معدل الإطارات في التطبيقات المحمولة. في Android، الأداة الرئيسية هي GPU Profiling (Developer Options ← Profile GPU Rendering)، والتي تعرض خطًا زمنيًا لكل إطار مقسمًا حسب المراحل (Draw, Prepare, Process, Execute). يوفر Android Studio Profiler تحليلاً أكثر تفصيلاً — فهو يسجل ملفًا كاملاً للعرض يشير إلى طرق العرض المحددة التي تسبب إعادة الرسم. في iOS، يُستخدم Instruments مع قالب Core Animation — يعرض FPS ووقت عرض الطبقات وعدد عمليات العرض خارج الشاشة.

لمراقبة معدل الإطارات في الإنتاج، يُستخدم Firebase Performance (Android) — يجمع معدل الإطارات في الخلفية ويجمعه حسب الجهاز وإصدار نظام التشغيل والجلسة. في iOS، يوفر MetricKit بيانات مماثلة عبر MXAnimatoryMetric. للألعاب وتطبيقات Flutter، يُستخدم FrameTimingCallback (Flutter) وUnity Profiler. من المهم قياس ليس متوسط معدل الإطارات بل النسب المئوية: P50 وP90 وP99. قد يظهر التطبيق متوسط 55 إطارًا في الثانية ولكن لديه P99 = 30 إطارًا في الثانية — وهذا يعني أن 1% من الوقت يرى المستخدمون تقطيعًا شديدًا، وهو ما يكفي للمراجعات السلبية.

قياس معدل الإطارات في Flutter

يوضح مثال Dart كيفية الاشتراك في FrameTimingCallback في Flutter وتسجيل عدد الإطارات المفقودة. يتم تشغيل الاستدعاء بعد كل إطار مكتمل.

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 مستويات. في مرحلة الرسم — overdraw: عندما يتم رسم البكسل عدة مرات لكل إطار. على سبيل المثال، خلفية Activity بيضاء تحت جزء شبه شفاف، وتحته طبقة أخرى — كل بكسل يُرسم ثلاث مرات. تُظهر أداة Debug GPU Overdraw المناطق المشكلة بمؤشرات لونية. يوصى بالحفاظ على overdraw عند 2x أو أقل.

في iOS، المشكلات الرئيسية هي cornerRadius وmasksToBounds الثقيلان — يسببان عرضًا خارج الشاشة، حيث يقوم Core Animation بإنشاء مخزن مؤقت مؤقت ويرسم فيه ثم ينسخ النتيجة إلى الشاشة. يمكن اكتشاف العرض خارج الشاشة بسهولة في Instruments Core Animation: إذا كان خط Renderer أحمر — فهناك مشكلات. الحل هو استخدام UIImageView مع صور مقطوعة مسبقًا بدلاً من cornerRadius، وتجنب 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 إطارًا في الثانية للسلاسة، بينما تحتاج الشاشة الثابتة فقط 60 إطارًا في الثانية أو حتى 30 إطارًا في الثانية للفيديو. في Android، يتم تنفيذ التكيف عبر Choreographer.setFrameInterval (API 33+) وWindow.setFrameRate. يمكن للمطور تحديد تردد مفضل: setPreferredRefreshRate في SurfaceView أو setFrameRate في Window. يدير iOS التردد تلقائيًا عبر ProMotion، ولكن يمكن للمطور تعيين preferredFramesPerSecond بشكل صريح لـ CADisplayLink.

معدل الإطارات الديناميكي مهم بشكل خاص للألعاب والتطبيقات ذات الرسوم المتحركة. وفقًا لـ Google، فإن خفض معدل الإطارات من 120 إلى 60 هرتز على شاشة ثابتة يوفر ما يصل إلى 30–40% من طاقة GPU. لتحقيق أفضل توازن بين السلاسة واستهلاك الطاقة، يوصى بـ: قياس معدل الإطارات الفعلي في سيناريوهات مختلفة، وتعيين الإطارات في الثانية المستهدفة اعتمادًا على المشهد (لعبة — 60، قائمة — 30، فيديو — 24)، وتبديل الأوضاع عبر مكونات Lifecycle-aware بحيث لا يهدر التطبيق الموارد في عرض 120 إطارًا في الثانية في الخلفية عند تصغيره.

تعيين معدل الإطارات المفضل

يقوم كود Swift بتعيين preferredFramesPerSecond لـ CADisplayLink في iOS. أثناء التمرير يزداد التردد إلى 120 هرتز، وعند التوقف ينخفض إلى 60 هرتز.

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() {
        // تحديث الرسوم المتحركة
    }
}