خلفية
نحن ندرس باستمرار أداء الحلول المحمولة عبر الأنظمة الأساسية المتاحة في السوق. نريد أن نعرف التكنولوجيا الأفضل لتطوير منتج معين.
في هذه المقالة ، قررنا التحقيق في أداء عرض واجهة المستخدم الرسومية ، وهو أمر ذو أهمية كبيرة لمستخدمي الهواتف المحمولة. بعبارات بسيطة ، ستكون أي مكابح مرئية بالعين المجردة.
يعد قياس أداء واجهة المستخدم مهمة معقدة تتطلب نفس التنفيذ لنفس الوظيفة على جميع الأنظمة الأساسية. استخدمنا GameBench كأداة اختبارللتأكد من موضوعيتنا (هذا لا يغير حقيقة أننا نحب حقًا Flutter ، وما زلنا نقوم بالكثير من المشاريع على React Native ، وكذلك الانخراط في التنمية المحلية). تمكنا من وضع كل تطبيق في بيئة اختبار واحدة.
كود المصدر مفتوح ، لذلك إذا أردت ، جرب وشاركنا أفكارك. تستخدم الرسوم المتحركة لواجهة المستخدم أدوات مختلفة اعتمادًا على النظام الأساسي ، لذلك قمنا بتضييق نطاقنا إلى المكتبات التي تدعمها كل منصة (باستثناء حالة واحدة) ، أو على الأقل بذلنا قصارى جهدنا لتحقيق ذلك. قد تختلف نتائج الاختبار وتعتمد على طرق التنفيذ الخاصة بك. سنحسب أنك ، كخبير حقيقي في تقنية معينة ، يمكنك تحديد وتخصيص مجموعة الأدوات الخاصة بك التي ستوفر معدلات أعلى. سنكون سعداء إذا فعلت ذلك وأخبرتنا بما حدث.
عن الحديد
لأغراض الاختبار ، استخدمنا Xiaomi Redmi Note 5 و iPhone 6s.
رابط المستودع: كود المصدر
اختبار 1: عرض القائمة
لقد قمنا بتنفيذ نفس الواجهة أصلاً (على Android و iOS) ، في React Native ، و Flutter. قمنا أيضًا بأتمتة سرعة التمرير باستخدام RecyclerView.SmoothScroller على Android. في نظامي iOS و React Native ، استخدمنا جهاز تمرير للبيانات ومؤقت. في Flutter ، استخدمنا ScrollController لتمرير القائمة بسلاسة. في كل حالة ، كان لدينا 1000 عنصر في القائمة ، وقمنا بإصلاح وقت التمرير نفسه إلى العنصر الأخير في القائمة. في كل حالة من هذه الحالات ، استخدمنا التخزين المؤقت للصور مع مكتبات مختلفة لكل نظام أساسي. راجع رمز المصدر لمزيد من التفاصيل .
مكتبات لتحميل وتخزين الصور
iOS
ذكري المظهر
رد فعل الأم
لسوء الحظ ، لا ينتج عن المعيار نتائج اختبار GPU لأجهزة Android. حاولنا مختلفة ، ولكن للأسف.
نتائج اختبار أخرى لـ Android
- أظهرت جميع الاختبارات نفس FPS تقريبًا.
- يستخدم Android Native نصف مساحة الذاكرة مثل Flutter و React Native.
- يتطلب React Native معظم استخدام CPU. والسبب هو استخدام JS Bridge بين JS و Native code ، مما يؤدي إلى إهدار الموارد للتسلسل وإلغاء التسلسل.
- من حيث عمر البطارية ، حقق Android Native نتيجة أفضل. تأخر رد الفعل الأصلي وراء كل من Android و Flutter. يستهلك تشغيل الرسوم المتحركة المستمرة مزيدًا من طاقة البطارية في React Native.
نتائج الاختبار لـ iPhone 6s
- FPS. رد فعل المواطن أداء أسوأ من Flutter و Swift. السبب هو عدم القدرة على استخدام تجميع إنترنت الأشياء على iOS.
- ذاكرة. Flutter يمكن مقارنته بـ Swift من حيث استهلاك الذاكرة ، ولكنه يقوم بتحميل المعالج بشكل أقوى. في هذا الاختبار ، يتأخر React Native عن Flutter و Swift.
- Flutter vs Swift: يستخدم Flutter وحدة المعالجة المركزية بنشاط ، ويستخدم Swift بنشاط وحدة معالجة الرسومات.
اختبار 2: الرسوم المتحركة الثقيلة
في الوقت الحاضر ، تحتوي معظم الهواتف التي تعمل بنظام Android و iOS على أجهزة قوية. في معظم الحالات ، عند استخدام تطبيقات الأعمال الشائعة ، لم يلاحظ أي انخفاض في FPS. لهذا السبب قررنا إجراء بعض الاختبارات باستخدام الرسوم المتحركة الثقيلة. لإنشاء الرسوم المتحركة المتجهة ، استخدمنا Lottie لنظام Android و iOS و React Native و Flare for Flutter:
Lottie for Android و iOS و React Native و Flare for Flutter .
نتائج اختبار Android
- يمكن مقارنة Android Native و React Native في الأداء. هذا واضح لأن Lottie for React Native يستخدم مكالمات أصلية (16–19٪ CPU ، 30–29 FPS).
- كانت نتيجة Flutter مثيرة للدهشة ، على الرغم من أنه تم ثنيها قليلاً أثناء الاختبار (12 ٪ CPU و 9 FPS).
- يتطلب Android Native أقل قدر من الذاكرة (205 ميغابايت) ؛ يتطلب React Native 280 ميغا بايت و Flutter يتطلب 266 ميغا بايت.
- تطبيق البدء البارد. وفقًا لهذا المؤشر ، Flutter هو الزعيم (ثانيتان). بالنسبة إلى Android Native و React Native ، يستغرق الأمر حوالي 4 ثوانٍ.
وجدنا أن إزالة رسم متحرك واحد من الشبكة يزيد من معدل FPS بنسبة تصل إلى 40٪ لـ Flutter. نفترض أن Flare ثقيل وغير محسن بما يكفي لهذا النوع من المهام. هذا هو السبب في حدوث Flutter مثل هذا الانخفاض في FPS.
انظر إلى هذا:
نتائج اختبار IOS
- نتائج iOS و React Native في هذا الاختبار هي تقريبًا نفس نتائج Lottie for React Native.
- لا يتوهج التوهج مع Flutter أبدًا. التوهج في هذا الاختبار رائع بشكل عام!
- يتطلب الرمز الأصلي لنظام iOS هنا أقل قدر من الذاكرة (48 ميجابايت). يتطلب React Native 135 ميغا بايت و Flutter يتطلب 117 ميغا بايت.
- تطبيق البدء البارد. وفقًا لهذا المؤشر ، Flutter هو الزعيم (ثانيتان). بالنسبة إلى رمز iOS الأصلي و React Native ، يستغرق الأمر حوالي 10 ثوانٍ.
يرجى ملاحظة: هنا استخدمنا مكتبة مختلفة مع Flutter ، وهو أثقل بكثير مما استخدمناه لمنصات أخرى ، وقد يكون هذا سبب انخفاض FPS لـ Flutter.
اختبار 3: الرسوم المتحركة الثقيلة مع التدوير والتدرج والتلاشي
في هذا الاختبار ، قارنا أداء الرسوم المتحركة بـ 200 صورة. يتم تنفيذ التدوير والتحجيم في وقت واحد.
Android
- Android Native .
- Flutter Native fps , .
- React Native .
iOS
- iPhone 6s , FPS 3 .
- , GPU.
- React Native , Flutter GPU.
- , React Native .
بالنسبة لتطبيقات الأعمال ذات الرسوم المتحركة العادية والمظهر الجميل ، فإن اختيار التكنولوجيا من أجل التطوير ليس بالغ الأهمية. ولكن إذا كنت بحاجة إلى رسوم متحركة ثقيلة ، ضع في اعتبارك أن التطوير الأصلي سيوفر أفضل أداء في هذه الحالة. بعد ذلك يأتي Flutter ثم React Native. لا نوصي بالتأكيد باستخدام React Native للمهام التي يمكن أن تستهلك الكثير من موارد وحدة المعالجة المركزية ، في حين أن Flutter رائع لمثل هذه المهام من وجهة نظر المعالج والذاكرة.
يعتمد اختيار الأداة على المنتج والحالة المحددة. إذا كنت ترغب في تطوير MVP لمنصة واحدة ، يمكنك اختيار التطوير الأصلي ، ولكن ضع في اعتبارك أن Flutter يسمح لك بإنشاء تطبيقات لكل من الأجهزة المحمولة والويب. لذلك ، ربما ، سيصبح Flutter في المستقبل القريب الشركة الرائدة في السوق في تطوير المنصات المتعددة. تعتبر Flutter اليوم منافسًا جديرًا جدًا بأدوات التطوير المحلية ، خاصة إذا كانت ميزانية التطوير صغيرة ، ولكنك لا تزال ترغب في توفير مستوى مقبول من أداء التطبيق.
هناك العديد من العوامل التي تؤثر على معايير العملية والتطوير لكل تقنية. لقد حاولنا تعظيم شفافية العملية من خلال توفير بيئة اختبار واحدة لكل تطبيق ومجموعة موحدة من الأدوات لقياس الأداء.
إعلان
هل تحتاج إلى خادم لتطبيق جوال ؟ نلقي نظرة فاحصة على خوادمنا الملحمية ! هذه خوادم بأحدث معالجات AMD EPYC! سيسمح لك الحد الأقصى من التكوين بوضع مشروع بأي تعقيد - 128 نواة وحدة معالجة مركزية و 512 غيغابايت من ذاكرة الوصول العشوائي و 4000 غيغابايت NVMe.
