إزاي تمنع الشاشة من إعادة الرسم على الباطل وتوفر بطارية الموبايل

سهل الثلاثاء,21 يوليو 2026

1. كابوس الـ Overdraw: عندما يستهلك الكود طاقة المعالج في الفراغ

تحدث مشكلة "الرسم الزائد" (Overdraw) وإعادة الرسم العشوائي عندما يعيد التطبيق بناء وبث بكسلات الواجهة على الشاشة مرات متكررة في ثوانٍ معدودة، دون أن يتغير شكلها فعلياً بالنسبة للمستخدم. المعالج الجرافيكي (GPU) يضطر لمعالجة عناصر متراكمة فوق بعضها، مما يرفع درجة حرارة الجهاز ويستنزف بطارية الهاتف سريعاً. البداية تكمن في وعي المطور بأن كل عملية رسم بصرية لها تكلفة مباشرة من الطاقة.

2. عزل نطاق التحديث (Scoped State): لا تُعد بناء الشاشة بأكملها

أحد أكبر أسباب إعادة الرسم على الباطل هو ربط حالة متغير صغير (State) بجذر الشاشة الرئيسي (Root Widget/Component). عندما تتغير قيمة بسيطة مثل عداد الثواني أو زر إعجاب، يُعاد بناء وتنسيق كامل عناصر الصفحة. الحل يتمثل في استخدام أساليب إدارة حالة دقيقة، بحيث يتم محاصرة التغيير وتحديث المكون الصغير المعني فقط دون مساس باقي أجزاء الصفحة.

3. الاعتماد على العناصر الثابتة (const) والـ Memoization

إخبار محرك الرسم بأن جزءاً معيناً من الواجهة لن يتغير أبداً يُوفر أطنان المعالجة. في تقنيات مثل Flutter، يضمن استخدام الكلمة المفتاحية const استعادة نفس العنصر من الذاكرة بدلاً من إعادة إنشائه. وفي تقنيات مثل React Native، يساعد استخدام React.memo و useMemo على تجميد المكونات التي لم تتغير مدخلاتها (Props)، مما يمنع المحرك من إعادة تقييمها ورسمها من جديد.

4. عزل مساحات الحركة والأنيميشن (Repaint Boundaries)

عند وجود عنصر يتحرك باستمرار على الشاشة (مثل مؤشر تحكم أو أنيميشن دوران)، يتسبب هذا المكون افتراضياً في إجبار العناصر المجاورة له على إعادة الرسم معه في كل إطار. الحل هو استخدام أغطية العزل (مثل RepaintBoundary أو إنشاء layers منفصلة)، والتي تخبر النظام بأن هذا الجزء المتحرك له مساحة رسم خاصة، فيتم تحديثه هو فقط وتظل بقية العناصر الثابتة مستريحة تماماً.

5. تجنب معالجة العناصر المخفية والبعيدة عن الرؤية (Off-screen Rendering)

رسم عناصر تقع خارج حدود الشاشة الحالية (كما يحدث عند تحميل قائمة طويلة بالكامل) يُمثل إهداراً صريحاً للموارد. الاعتماد على القوائم الكسولة (Lazy Lists) التي تبني فقط العناصر الظاهرة للمستخدم حالياً يقلل جهد الرسم. بالإضافة إلى ذلك، يجب الحرص على إيقاف المؤشرات المتكررة (Timers) والأنيميشن التي تعمل في الخلفية عندما يفتح المستخدم شاشة أخرى أو ينتقل لتطبيق مختلف.

6. ترشيد التأثيرات الشفافة والظلال المركبة (Blur & Opacity)

التأثيرات البصرية المعقدة مثل الضبابية (Backdrop Blur) والتنعيم وخلفيات الشفافية المتعددة (Opacity Layers) تتطلب من معالج الرسوميات القيام بعمليات حسابية مضاعفة (Multi-pass rendering) لدمج الألوان فوق بعضها قبل العرض. استبدال هذه المؤثرات بألوان صريحة أو صور جاهزة خفيفة يقلل من الجهد المطلوب لرسم كل إطار، وهو ما ينعكس مباشرة على انخفاض استهلاك الطاقة.

7. كشف تسريب الرسم باستخدام أدوات الـ Profiling

لا تتوقع الأماكن التي تعيد الرسم من تلقاء نفسها بل قسها بدقة. تفعيل خيار "Show GPU Overdraw" في إعدادات المطور بالأندرويد، أو استخدام أدوات الديفيلوبر (Show Re-renders / Flash Size) يظهر لك العناصر التي تتغير ألوانها بكثرة أثناء استخدام التطبيق. هذه الرؤية البصرية بقعة بقعة تسمح لك باكتشاف الأزرار أو النصوص التي تعيد الرسم بصمت وتصحيح الكود المسبب لها فوراً.