أسئلة مقابلات Performance & Memory Optimization في React Native
10 سؤال عن Performance & Memory Optimization من مسار React Native. اقرأ الإجابة المختصرة لكل سؤال هنا، وافتح السؤال للشرح الكامل والأمثلة والأخطاء الشائعة والمصادر.
- متقدم
كيف تكتشف وتعالج تسريبات الذاكرة (Memory Leaks) في تطبيقات React Native؟
بأخذ لقطات ذاكرة ومراقبة Xcode Memory Gauge و Android Studio Profiler للبحث عن كائنات Native وأنشطة غير محررة، ومراجعة دوال التنظيف في useEffect للـ Timers والاشتراكات.
اقرأ الشرح الكامل - متقدم
ما هي ظاهرة الـ Overdraw في أجهزة أندرويد وكيف تؤثر على سلاسة رسم الواجهة؟
هي قيام النظام برسم نفس البكسل على الشاشة عدة مرات في نفس الإطار نتيجة لتراكم خلفيات ملونة غير ضرورية في حاويات <View> المتداخلة، مما يهدر طاقة كرت الشاشة (GPU).
اقرأ الشرح الكامل - متقدم
كيف تحسن من حجم حزمة التطبيق النهائية (App Bundle Size Reduction) في أندرويد و iOS؟
بتفعيل تمكين ProGuard/R8، وتقسيم ملفات الـ APK حسب معمارية المعالج (ABI Splitting)، واستخدام صيغ الصور الحديثة WebP، وضغط الخطوط، وإزالة المكتبات غير المستخدمة بـ Bundle Visualizer.
اقرأ الشرح الكامل - متقدم
كيف تسرع وقت بدء تشغيل التطبيق (Time to Interactive - TTI)؟
بالاعتماد على محرك Hermes لتشغيل الـ Bytecode مسبقاً، وتأجيل تهيئة حزم الـ SDK غير العاجلة بالخلفية، وتفادي استدعاءات التخزين والشبكة المتزامنة الثقيلة أثناء عرض الشاشة الأولى.
اقرأ الشرح الكامل - متوسط
ما هي خاصية removeClippedSubviews ومتى يكون تفعيلها سلاحاً ذا حدين؟
تقوم بفصل عناصر الـ Native Views التي تقع خارج حدود نافذة العرض من شجرة الرسم الأصلية لتوفير الذاكرة، لكنها قد تسبب وميضاً أو اختفاءً مؤقتاً لبعض العناصر أثناء التمرير السريع.
اقرأ الشرح الكامل - متوسط
كيف تتعامل مع أخطاء تصيير وتكبير حجم الصور (Image Downscaling) في وقت التشغيل؟
بطلب أبعاد الصورة المناسبة لحجم العرض من السيرفر (عبر CDN Image Resizing)، وتجنب تنزيل صور بدقة 4K لعرضها في أيقونة صغيرة بحجم 50x50 مما يستنزف الذاكرة.
اقرأ الشرح الكامل - مبتدئ
كيف يؤثر استخدام console.log المفرط على أداء تطبيق React Native في بيئة الإنتاج؟
عمليات console.log متزامنة وتمر عبر الـ Bridge وتقوم بتسلسل الكائنات الضخمة إلى نصوص، مما يسبب تجميداً ملحوظاً وسقوطاً للفريمات إذا تركت في كود الإنتاج.
اقرأ الشرح الكامل - متقدم
ما هي معمارية FlashList من Shopify وما الذي تحسّنه مقارنة بـ FlatList؟
تقوم FlashList بإعادة تدوير خلايا الـ Native Views القائمة واستبدال محتواها الداخلي فقط (Cell Recycling) بدلاً من تدمير وإنشاء مكونات جديدة عند التمرير.
اقرأ الشرح الكامل - متوسط
كيف تستخدم React Profiler لتحديد أسباب إعادة تصيير المكونات في شاشات الموبايل؟
بتغليف الشاشات بمكون <Profiler> لتسجيل معايير actualDuration و baseDuration، أو باستخدام تبويب Profiler في React Native DevTools لتسجيل الفروقات وتحليل أسباب الـ Re-render.
اقرأ الشرح الكامل - متوسط
كيف تمنع تجميد الشاشة أثناء تنفيذ العمليات الحسابية الضخمة باستخدام InteractionManager؟
بتأجيل تنفيذ المهام الثقيلة (مثل معالجة البيانات المعقدة أو التخزين) حتى تنتهي كافة الرسوم الحركية وتفاعلات اللمس الحالية باستخدام InteractionManager.runAfterInteractions.
اقرأ الشرح الكامل