قم بقياس وقت التحميل وعرض الشاشة باستخدام مراقبة أداء Firebase

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

1 المقدمة

آخر تحديث: 2021-03-11

لماذا نحتاج إلى قياس أداء المشاهدات؟

تعد المشاهدات جزءًا أساسيًا من تطبيقات Android التي تؤثر بشكل مباشر على تجربة المستخدم. على سبيل المثال ، يحتوي نشاطك أو جزءك على واجهة المستخدم التي تحتوي على مكونات العرض التي يتفاعل معها المستخدمون. لن يتمكن المستخدمون من رؤية المحتوى الكامل لواجهة المستخدم حتى يتم رسمها بالكامل على الشاشة. ستؤثر الشاشات البطيئة والمجمدة بشكل مباشر على تفاعل المستخدم مع تطبيقك وتخلق تجربة مستخدم سيئة.

ألا توفر مراقبة أداء Firebase مقاييس الأداء هذه خارج الصندوق؟

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

ماذا ستتعلم

  • كيفية إضافة Firebase Performance Monitoring إلى تطبيق Android
  • فهم تحميل نشاط أو جزء
  • كيفية أداة تتبع التعليمات البرمجية المخصصة لقياس وقت تحميل نشاط أو جزء
  • فهم عرض الشاشة وما هو الإطار البطيء / المجمد
  • كيفية قياس آثار التعليمات البرمجية المخصصة باستخدام المقاييس لتسجيل الشاشات البطيئة / المجمدة
  • كيفية عرض المقاييس التي تم جمعها في وحدة تحكم Firebase

ماذا ستحتاج

  • Android Studio 4.0 أو أعلى
  • جهاز / محاكي يعمل بنظام Android
  • إصدار Java 8 أو أعلى

2. الإعداد

احصل على الكود

قم بتشغيل الأوامر التالية لنسخ نموذج التعليمات البرمجية لمعمل الرموز هذا. سيؤدي هذا إلى إنشاء مجلد يسمى codelab-measure-android-view-performance على جهازك:

$ git clone https://github.com/FirebaseExtended/codelab-measure-android-view-performance.git
$ cd codelab-measure-android-view-performance

إذا لم يكن لديك git على جهازك ، فيمكنك أيضًا تنزيل الكود مباشرةً من GitHub.

قم باستيراد مشروع measure-view-performance-start إلى Android Studio. من المحتمل أن ترى بعض أخطاء الترجمة أو ربما ترى تحذيرًا بشأن ملف google-services.json مفقود. سنقوم بتصحيح هذا في القسم التالي من هذه الخطوة.

في معمل الرموز هذا ، سنستخدم المكون الإضافي Firebase Assistant لتسجيل تطبيق Android الخاص بنا مع مشروع Firebase وإضافة ملفات تهيئة Firebase الضرورية والمكونات الإضافية والتبعيات إلى مشروع Android الخاص بنا - كل ذلك من داخل Android Studio !

اربط تطبيقك بـ Firebase

  1. انتقل إلى Android Studio / Help > تحقق من وجود تحديثات للتأكد من أنك تستخدم أحدث إصدارات Android Studio و Firebase Assistant.
  2. حدد أدوات > Firebase لفتح جزء المساعد .

e791bed0999db1e0.png

  1. اختر مراقبة الأداء لإضافتها إلى تطبيقك ، ثم انقر فوق البدء في مراقبة الأداء .
  2. انقر فوق الاتصال بـ Firebase لتوصيل مشروع Android الخاص بك بـ Firebase (سيؤدي ذلك إلى فتح وحدة تحكم Firebase في متصفحك) .
  3. في وحدة تحكم Firebase ، انقر على إضافة مشروع ، ثم أدخل اسم مشروع Firebase (إذا كان لديك بالفعل مشروع Firebase ، يمكنك تحديد المشروع الحالي بدلاً من ذلك) . انقر على " متابعة " واقبل الشروط لإنشاء مشروع Firebase وتطبيق Firebase جديد.
  4. يجب أن ترى بعد ذلك مربع حوار لتوصيل تطبيق Firebase الجديد بمشروع Android Studio الخاص بك.

42c498d28ead2b77.png

  1. مرة أخرى في Android Studio ، في جزء المساعد ، يجب أن ترى التأكيد على أن تطبيقك متصل بـ Firebase.

dda8bdd9488167a0.png

أضف مراقبة الأداء إلى تطبيقك

في جزء المساعد في Android Studio ، انقر فوق إضافة مراقبة الأداء إلى التطبيق الخاص بك .

يجب أن ترى مربع حوار لقبول التغييرات وبعد ذلك يجب أن يقوم Android Studio بمزامنة تطبيقك لضمان إضافة جميع التبعيات الضرورية.

9b58145acc4be030.png

أخيرًا ، يجب أن ترى رسالة النجاح في جزء المساعد في Android Studio مفادها أنه تم إعداد جميع التبعيات بشكل صحيح.

aa0d46fc944e0c0b.png

كخطوة إضافية ، قم بتمكين تسجيل التصحيح باتباع الإرشادات الواردة في الخطوة "(اختياري) تمكين تسجيل التصحيح". نفس التعليمات متوفرة أيضا في الوثائق العامة .

3. قم بتشغيل التطبيق

إذا نجحت في دمج تطبيقك مع SDK لمراقبة الأداء ، فيجب أن يتم تجميع المشروع الآن. في Android Studio ، انقر فوق تشغيل > تشغيل "التطبيق" لإنشاء التطبيق وتشغيله على جهاز / محاكي Android المتصل.

يحتوي التطبيق على زرين ينقلكان إلى نشاط وجزء مطابق ، مثل هذا:

410d8686b4f45c33.png

في الخطوات التالية لمعمل الرموز هذا ، ستتعلم كيفية قياس وقت التحميل وأداء عرض الشاشة لنشاطك أو جزءك.

4. فهم تحميل نشاط أو جزء

في هذه الخطوة ، سنتعرف على ما يفعله النظام أثناء تحميل نشاط أو جزء.

فهم تحميل النشاط

بالنسبة للنشاط ، يتم تعريف وقت التحميل على أنه الوقت الذي يبدأ من وقت إنشاء كائن النشاط على طول الطريق حتى يتم رسم الإطار الأول بالكامل على الشاشة ( هذا هو الوقت الذي سيرى فيه المستخدم واجهة المستخدم الكاملة للنشاط لأول مرة الوقت ). لقياس ما إذا كان تطبيقك مرسومًا بالكامل ، يمكنك استخدام طريقة reportFullyDrawn() لقياس الوقت المنقضي بين بدء تشغيل التطبيق والعرض الكامل لجميع الموارد وعرض التسلسلات الهرمية.

على مستوى عالٍ ، عندما يستدعي تطبيقك startActivity(Intent) ، يقوم النظام تلقائيًا بتنفيذ العمليات التالية. تستغرق كل عملية وقتًا حتى تكتمل ، مما يضيف إلى المدة الزمنية بين إنشاء النشاط والوقت الذي يرى فيه المستخدم واجهة المستخدم للنشاط على شاشته.

c20d14b151549937.png

فهم تحميل جزء

على غرار النشاط ، يتم تعريف وقت تحميل جزء ما على أنه الوقت الذي يبدأ من عند إرفاق الجزء بالنشاط المضيف طوال الطريق حتى يتم رسم الإطار الأول لعرض الجزء بالكامل على الشاشة.

5. قم بقياس وقت تحميل النشاط

يمكن أن تؤدي التأخيرات في الإطار الأول إلى تجربة مستخدم سيئة ، لذلك من المهم أن تفهم مقدار تأخير التحميل الأولي الذي يواجهه المستخدمون. يمكنك استخدام أداة تتبع رمز مخصص لقياس وقت التحميل هذا:

  1. ابدأ تتبع التعليمات البرمجية المخصصة (المسمى TestActivity-LoadTime ) في فئة النشاط بمجرد إنشاء كائن النشاط.

TestActivity.java

public class TestActivity extends AppCompatActivity {   
    // TODO (1): Start trace recording as soon as the Activity object is created.
    private final Trace viewLoadTrace = FirebasePerformance.startTrace("TestActivity-LoadTime");

    // ...

}
  1. تجاوز رد onCreate() ، واحصل على طريقة العرض المضافة بواسطة طريقة setContentView() .
@Override     
public void onCreate(Bundle savedInstanceState) {    
    super.onCreate(savedInstanceState);          

    // Current Activity's main View (as defined in the layout xml file) is inflated after this            
    setContentView(R.layout.activity_test);          

    // ...

    // TODO (2): Get the View added by Activity's setContentView() method.         
    View mainView = findViewById(android.R.id.content);     

    // ...
}
  1. لقد قمنا بتضمين تطبيق FistDrawListener ، والذي يحتوي على نداءين: onDrawingStart() و onDrawingFinish() (انظر القسم التالي أدناه للحصول على مزيد من التفاصيل حول FirstDrawListener وما يمكن أن يؤثر على أدائها) . FirstDrawListener في نهاية رد الاتصال onCreate() الخاص بالنشاط. يجب عليك إيقاف viewLoadTrace الخاص بك في رد الاتصال onDrawingFinish() .

TestActivity.java

    // TODO (3): Register the callback to listen for first frame rendering (see
    //  "OnFirstDrawCallback" in FirstDrawListener) and stop the trace when View drawing is
    //  finished.
    FirstDrawListener.registerFirstDrawListener(mainView, new FirstDrawListener.OnFirstDrawCallback() {              
        @Override             
        public void onDrawingStart() {       
          // In practice you can also record this event separately
        }

        @Override             
        public void onDrawingFinish() {
            // This is when the Activity UI is completely drawn on the screen
            viewLoadTrace.stop();             
        }         
    });
  1. أعد تشغيل التطبيق. بعد ذلك ، قم بتصفية logcat باستخدام " قياس تتبع التسجيل ". اضغط على زر LOAD ACTIVITY ، وابحث عن السجلات مثل أدناه:
I/FirebasePerformance: Logging trace metric: TestActivity-LoadTime (duration: XXXms)

🎉 مبروك! لقد نجحت في قياس وقت تحميل أحد الأنشطة وإبلاغ مراقبة أداء Firebase بهذه البيانات. سنعرض المقياس المسجل في وحدة تحكم Firebase لاحقًا في مختبر الرموز هذا.

الغرض من FirstDrawListener

في القسم أعلاه ، قمنا بتسجيل FirstDrawListener . الغرض من FirstDrawListener هو قياس وقت بدء الإطار الأول وانتهائه من الرسم.

يقوم بتنفيذ ViewTreeObserver.OnDrawListener ويتجاوز رد onDraw() الذي يتم استدعاؤه عندما تكون شجرة العرض على وشك الرسم. ثم يلتف النتيجة لتوفير اثنين من استدعاءات الأداة المساعدة onDrawingStart() و onDrawingFinish() .

يمكن العثور على الكود الكامل لـ FirstDrawListener في الكود المصدري لمختبر الترميز هذا.

6. قياس وقت تحميل جزء

يشبه قياس وقت تحميل جزء ما طريقة قياسه لنشاط ولكن مع بعض الاختلافات الطفيفة. مرة أخرى ، سنعمل على تتبع رمز مخصص :

  1. تجاوز رد onAttach() وابدأ في تسجيل fragmentLoadTrace . سنقوم بتسمية هذا التتبع Test-Fragment-LoadTime .

كما هو موضح في خطوة سابقة ، يمكن إنشاء كائن Fragment في أي وقت ، لكنه يصبح نشطًا فقط عند إرفاقه بنشاط مضيفه.

TestFragment.java

public class TestFragment extends Fragment {

   // TODO (1): Declare the Trace variable.
   private Trace fragmentLoadTrace;

   @Override
   public void onAttach(@NonNull Context context) {
       super.onAttach(context);

       // TODO (2): Start trace recording as soon as the Fragment is attached to its host Activity.
       fragmentLoadTrace = FirebasePerformance.startTrace("TestFragment-LoadTime");
   }
  1. FirstDrawListener في رد الاتصال onViewCreated() . ثم ، على غرار مثال النشاط ، أوقف التتبع في onDrawingFinish() .

TestFragment.java

@Override
public void onViewCreated(@NonNull View mainView, Bundle savedInstanceState) {
   super.onViewCreated(mainView, savedInstanceState);

   // ...

   // TODO (3): Register the callback to listen for first frame rendering (see
   //  "OnFirstDrawCallback" in FirstDrawListener) and stop the trace when view drawing is
   //  finished.
   FirstDrawListener.registerFirstDrawListener(mainView, new FirstDrawListener.OnFirstDrawCallback() {

       @Override
       public void onDrawingStart() {
           // In practice you can also record this event separately
       }

       @Override
       public void onDrawingFinish() {
           // This is when the Fragment UI is completely drawn on the screen
           fragmentLoadTrace.stop();
       }
   });
  1. أعد تشغيل التطبيق. بعد ذلك ، قم بتصفية logcat باستخدام " قياس تتبع التسجيل ". اضغط على زر LOAD FRAGMENT ، وابحث عن السجلات مثل أدناه:
I/FirebasePerformance: Logging trace metric: TestFragment-LoadTime (duration: XXXms)

🎉 مبروك! لقد قمت بقياس وقت تحميل جزء بنجاح وأبلغت تلك البيانات إلى Firebase Performance Monitoring. سنعرض المقياس المسجل في وحدة تحكم Firebase لاحقًا في مختبر الرموز هذا.

7. فهم عرض الشاشة وما هو الإطار البطيء / المجمد

UI Rendering هو عملية إنشاء إطار من تطبيقك وعرضه على الشاشة. لضمان سلاسة تفاعل المستخدم مع تطبيقك ، يجب أن يعرض تطبيقك الإطارات في أقل من 16 مللي ثانية لتحقيق 60 إطارًا في الثانية ( لماذا 60 إطارًا في الثانية؟ ). إذا كان تطبيقك يعاني من بطء عرض واجهة المستخدم ، فسيتم إجبار النظام على تخطي الإطارات ، وسيرى المستخدم التأتأة في تطبيقك. نحن نسمي هذا خردة .

وبالمثل ، فإن الإطارات المجمدة هي إطارات واجهة مستخدم يستغرق عرضها أكثر من 700 مللي ثانية. يمثل هذا التأخير مشكلة لأن تطبيقك يبدو متوقفًا ولا يستجيب لإدخال المستخدم لمدة ثانية كاملة تقريبًا أثناء عرض الإطار.

8. قياس الإطارات البطيئة / المجمدة لجزء

تعمل مراقبة أداء Firebase تلقائيًا على التقاط الإطارات البطيئة / المجمدة للنشاط ( ولكن فقط إذا كان يتم تسريع الأجهزة ). ومع ذلك ، هذه الميزة غير متوفرة حاليًا للأجزاء. يتم تعريف الإطارات البطيئة / المجمدة للجزء على أنها الإطارات البطيئة / المجمدة للنشاط بأكمله بين عمليات onFragmentAttached() و onFragmentDetached() في دورة حياة الجزء.

أخذنا الدافع من فئة AppStateMonitor ( التي تعد جزءًا من SDK لمراقبة الأداء المسؤول عن تسجيل آثار الشاشة للنشاط) ، قمنا بتنفيذ فئة ScreenTrace ( والتي تعد جزءًا من مستودع رمز مصدر مختبر الكود هذا ). يمكن توصيل فئة ScreenTrace دورة حياة FragmentManager في Activity لالتقاط الإطارات البطيئة / المجمدة. يوفر هذا الفصل اثنين من واجهات برمجة التطبيقات العامة:

  • recordScreenTrace() : يبدأ في تسجيل تتبع الشاشة
  • sendScreenTrace() : لإيقاف تسجيل تتبع الشاشة وإرفاق مقاييس مخصصة لتسجيل عدد الإطارات الإجمالية والبطيئة والمجمدة

من خلال إرفاق هذه المقاييس المخصصة ، يمكن معالجة آثار الشاشة للأجزاء بنفس طريقة تتبع الشاشة للنشاط ويمكن عرضها جنبًا إلى جنب مع آثار عرض الشاشة الأخرى في لوحة معلومات الأداء لوحدة تحكم Firebase.

فيما يلي كيفية تسجيل آثار الشاشة للجزء الخاص بك:

  1. قم بتهيئة فئة ScreenTrace في نشاطك الذي يستضيف الجزء.

MainActivity.java

// Declare the Fragment tag
private static final String FRAGMENT_TAG = TestFragment.class.getSimpleName();

// TODO (1): Declare the ScreenTrace variable.
private ScreenTrace screenTrace;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // TODO (2): Initialize the ScreenTrace variable.
    screenTrace = new ScreenTrace(this, FRAGMENT_TAG);

    // ...
}
  1. عند تحميل الجزء الخاص بك ، قم بالتسجيل في FragmentLifecycleCallbacks وتجاوز عمليات onFragmentAttached() و onFragmentDetached() . لقد فعلنا هذا من أجلك. تحتاج إلى بدء تسجيل آثار الشاشة في رد الاتصال onFragmentAttached() وإيقاف التسجيل في رد الاتصال onFragmentDetached() .

MainActivity.java

private final FragmentManager.FragmentLifecycleCallbacks fragmentLifecycleCallbacks =
       new FragmentManager.FragmentLifecycleCallbacks() {

           @Override
           public void onFragmentAttached(@NonNull FragmentManager fm, @NonNull Fragment f, @NonNull Context context) {
               super.onFragmentAttached(fm, f, context);

               // TODO (3): Start recording the screen traces as soon as the Fragment is
               //  attached to its host Activity.
               if (FRAGMENT_TAG.equals(f.getTag()) && screenTrace.isScreenTraceSupported()) {
                   screenTrace.recordScreenTrace();
               }
           }

           @Override
           public void onFragmentDetached(@NonNull FragmentManager fm, @NonNull Fragment f) {
               super.onFragmentDetached(fm, f);

               // TODO (4): Stop recording the screen traces as soon as the Fragment is
               //  detached from its host Activity.
               if (FRAGMENT_TAG.equals(f.getTag()) && screenTrace.isScreenTraceSupported()) {
                   screenTrace.sendScreenTrace();
               }

               // Unregister Fragment lifecycle callbacks after the Fragment is detached
               fm.unregisterFragmentLifecycleCallbacks(fragmentLifecycleCallbacks);
           }
       };
  1. أعد تشغيل التطبيق. ثم اضغط على زر LOAD FRAGMENT . انتظر بضع ثوانٍ ، ثم انقر فوق back button في شريط التنقل السفلي.

قم بتصفية logcat باستخدام " مقياس تتبع التسجيل " ، ثم ابحث عن السجلات مثل أدناه:

I/FirebasePerformance: Logging trace metric: _st_MainActivity-TestFragment (duration: XXXms)

قم بتصفية logcat باستخدام " FireperfViews " ، ثم ابحث عن السجلات مثل أدناه:

D/FireperfViews: sendScreenTrace MainActivity-TestFragment, name: _st_MainActivity-TestFragment, total_frames: XX, slow_frames: XX, frozen_frames: XX

🎉 مبروك! لقد نجحت في قياس الإطارات البطيئة / المجمدة لجزء وأبلغت تلك البيانات إلى Firebase Performance Monitoring. سنعرض المقاييس المسجلة في وحدة تحكم Firebase لاحقًا في مختبر الرموز هذا.

9. تحقق من المقاييس في وحدة تحكم Firebase

  1. في logcat ، انقر فوق عنوان URL لوحدة التحكم Firebase لزيارة صفحة التفاصيل للتتبع. ceb9d5ba51bb6e89.jpeg

بدلاً من ذلك ، في وحدة تحكم Firebase ، حدد المشروع الذي يحتوي على تطبيقك. في اللوحة اليمنى ، حدد قسم الإصدار والمراقبة ، ثم انقر على الأداء .

  • في علامة تبويب لوحة المعلومات الرئيسية ، قم بالتمرير لأسفل إلى جدول التتبع ، ثم انقر فوق علامة تبويب التتبع المخصص . في هذا الجدول ، سترى آثار التعليمات البرمجية المخصصة التي أضفناها سابقًا بالإضافة إلى بعض التتبع خارج الصندوق ، مثل تتبع _app_start .
  • ابحث عن تتبعي الكود المخصصين ، TestActivity-LoadTime و TestFragment-LoadTime . انقر فوق المدة لأي منهما لعرض مزيد من التفاصيل حول البيانات التي تم جمعها.

a0d8455c5269a590.png

  1. تعرض لك صفحة التفاصيل لتتبع الشفرة المخصصة معلومات حول مدة التتبع (أي وقت التحميل المقاس).

5e92a307b7410d8b.png

  1. يمكنك أيضًا عرض بيانات الأداء لتتبع الشاشة المخصص.
  • ارجع إلى علامة تبويب لوحة المعلومات الرئيسية ، وقم بالتمرير لأسفل إلى جدول التتبع ، ثم انقر فوق علامة تبويب عرض الشاشة . في هذا الجدول ، سترى آثار الشاشة المخصصة التي أضفناها سابقًا بالإضافة إلى أي تتبعات شاشة خارج الصندوق ، مثل تتبع MainActivity .
  • ابحث عن تتبع الشاشة المخصص ، MainActivity-TestFragment . انقر فوق اسم التتبع لعرض البيانات المجمعة للعرض البطيء والإطارات المجمدة.

ee7890c7e2c28740.png

10. مبروك

تهانينا! لقد نجحت في قياس وقت التحميل وأداء عرض الشاشة لنشاط وجزء باستخدام مراقبة أداء Firebase!

ما أنجزته

ماذا بعد

يوفر أداء Firebase طرقًا أكثر لقياس أداء تطبيقك بخلاف التتبع المخصص. يقيس تلقائيًا وقت بدء تشغيل التطبيق وبيانات أداء التطبيق في الخلفية . حان الوقت للتحقق من هذه المقاييس في Firebase Console .

يوفر Firebase Performance أيضًا مراقبة تلقائية لطلبات شبكة HTTP / S. باستخدام ذلك يمكنك بسهولة إجراء طلبات الشبكة دون كتابة سطر واحد من التعليمات البرمجية. هل يمكنك محاولة إرسال بعض طلبات الشبكة من تطبيقك والعثور على المقاييس في وحدة تحكم Firebase ؟

علاوة

الآن بعد أن عرفت كيفية قياس وقت التحميل وأداء عرض الشاشة للنشاط / الجزء الخاص بك باستخدام تتبعات التعليمات البرمجية المخصصة ، هل يمكنك استكشاف قاعدة الشفرة مفتوحة المصدر الخاصة بنا لمعرفة ما إذا كان يمكنك التقاط هذه المقاييس خارج الصندوق لأي نشاط / جزء هذا جزء من التطبيق؟ لا تتردد في إرسال العلاقات العامة إذا كنت ترغب في ذلك :-)

11. مكافأة التعلم

سيساعدك فهم ما يحدث أثناء تحميل النشاط على فهم خصائص أداء تطبيقك بشكل أفضل. في خطوة سابقة ، وصفنا على مستوى عالٍ ما يحدث أثناء تحميل النشاط ، لكن الرسم البياني التالي يصف كل مرحلة بتفصيل أكبر بكثير.

cd61c1495fad7961.png