วัดเวลาในการโหลดและการแสดงผลหน้าจอด้วยการตรวจสอบประสิทธิภาพของ Firebase

1. บทนำ

อัปเดตล่าสุด 11-03-2021

เหตุใดเราจึงต้องวัดประสิทธิภาพของ "ยอดดู"

การดูเป็นส่วนสำคัญของแอปพลิเคชัน Android ซึ่งส่งผลต่อประสบการณ์ของผู้ใช้โดยตรง ตัวอย่างเช่น กิจกรรมหรือ Fragment มี UI ที่เก็บคอมโพเนนต์ "ดู" ที่ผู้ใช้โต้ตอบด้วย ผู้ใช้ไม่สามารถดูเนื้อหาทั้งหมดของ UI ได้จนกว่าจะวาดรูปบนหน้าจออย่างสมบูรณ์ หน้าจอที่ช้าและค้างจะทำให้ผู้ใช้โต้ตอบกับแอปไม่ได้โดยตรงและสร้างประสบการณ์ที่ไม่ดีแก่ผู้ใช้

การตรวจสอบประสิทธิภาพของ Firebase ไม่มีเมตริกประสิทธิภาพเหล่านี้ให้ใช้ได้ทันทีใช่ไหม

การตรวจสอบประสิทธิภาพของ Firebase จะบันทึกข้อมูลประสิทธิภาพบางอย่างที่พร้อมใช้งานทันที เช่น เวลาเริ่มต้นแอป (กล่าวคือ เวลาในการโหลดสำหรับกิจกรรมแรกเท่านั้น) และประสิทธิภาพการแสดงผลหน้าจอ (เฟรมที่ช้าและค้างสำหรับกิจกรรม แต่ไม่ใช่สำหรับ Fragment) อย่างไรก็ตาม แอปในอุตสาหกรรมมักจะไม่มีกิจกรรมมากมาย แต่มีแค่กิจกรรมเดียวและมีส่วนย่อยหลายๆ ส่วน นอกจากนี้ แอปจำนวนมากมักจะใช้มุมมองที่กำหนดเองของตัวเองในกรณีการใช้งานที่ซับซ้อนมากขึ้น ดังนั้นการทำความเข้าใจวิธีวัดเวลาที่ใช้ในการโหลดและประสิทธิภาพการแสดงผลหน้าจอของทั้งกิจกรรมและ Fragment จึงมีประโยชน์สำหรับการติดตามโค้ดที่กำหนดเองในแอปของคุณ คุณสามารถขยาย Codelab นี้เพื่อวัดประสิทธิภาพของคอมโพเนนต์มุมมองที่กำหนดเองได้อย่างง่ายดาย

สิ่งที่คุณจะได้เรียนรู้

  • วิธีเพิ่มการตรวจสอบประสิทธิภาพ Firebase ลงในแอป Android
  • การทำความเข้าใจการโหลดกิจกรรมหรือส่วนย่อย
  • วิธีใช้การติดตามโค้ดที่กำหนดเองเพื่อวัดเวลาที่ใช้ในการโหลดของกิจกรรมหรือส่วนย่อย
  • ทำความเข้าใจการแสดงผลหน้าจอและเฟรมที่ช้า/ค้างคืออะไร
  • วิธีใช้การติดตามโค้ดที่กำหนดเองด้วยเมตริกเพื่อบันทึกหน้าจอช้า/ค้าง
  • วิธีดูเมตริกที่รวบรวมไว้ในคอนโซล Firebase

สิ่งที่คุณต้องมี

  • Android Studio 4.0 ขึ้นไป
  • อุปกรณ์/โปรแกรมจำลอง Android
  • Java เวอร์ชัน 8 ขึ้นไป

2. การตั้งค่า

รับโค้ด

เรียกใช้คำสั่งต่อไปนี้เพื่อโคลนโค้ดตัวอย่างสำหรับ Codelab นี้ การดำเนินการนี้จะสร้างโฟลเดอร์ชื่อ 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 ที่ขาดหายไป เราจะแก้ไขปัญหานี้ในส่วนถัดไปของขั้นตอนนี้

ใน Codelab นี้ เราจะใช้ปลั๊กอิน Firebase Assistant เพื่อลงทะเบียนแอป Android กับโปรเจ็กต์ Firebase และเพิ่มไฟล์การกำหนดค่า ปลั๊กอิน และทรัพยากร Dependency ที่จำเป็นของ Firebase ลงในโปรเจ็กต์ Android จากภายใน Android Studio

เชื่อมต่อแอปกับ Firebase

  1. ไปที่ Android Studio/ความช่วยเหลือ > ตรวจหาอัปเดตเพื่อให้แน่ใจว่าคุณกำลังใช้ Android Studio และ Firebase Assistant เวอร์ชันล่าสุด
  2. เลือกเครื่องมือ > Firebase เพื่อเปิดแผง Assistant

e791bed0999db1e0.png

  1. เลือกการตรวจสอบประสิทธิภาพเพื่อเพิ่มในแอป แล้วคลิกเริ่มต้นใช้งานการตรวจสอบประสิทธิภาพ
  2. คลิกเชื่อมต่อกับ Firebase เพื่อเชื่อมต่อโปรเจ็กต์ Android กับ Firebase (ซึ่งจะเปิดคอนโซล Firebase ในเบราว์เซอร์)
  3. ในคอนโซล Firebase ให้คลิกเพิ่มโปรเจ็กต์ แล้วป้อนชื่อโปรเจ็กต์ Firebase (หากมีโปรเจ็กต์ Firebase อยู่แล้ว ก็เลือกโปรเจ็กต์ที่มีอยู่แทนได้) คลิกต่อไปและยอมรับข้อกำหนดเพื่อสร้างโปรเจ็กต์ Firebase และแอป Firebase ใหม่
  4. จากนั้นคุณควรเห็นกล่องโต้ตอบสำหรับเชื่อมต่อแอป Firebase ใหม่กับโปรเจ็กต์ Android Studio

42c498d28ead2b77.png

  1. กลับไปที่ Android Studio ในแผง Assistant คุณจะเห็นการยืนยันว่าแอปเชื่อมต่อกับ Firebase แล้ว

dda8bdd9488167a0.png

เพิ่มการตรวจสอบประสิทธิภาพลงในแอป

ในแผง Assistant ใน Android Studio ให้คลิกเพิ่มการตรวจสอบประสิทธิภาพลงในแอป

คุณควรเห็นกล่องโต้ตอบสำหรับยอมรับการเปลี่ยนแปลงหลังจากที่ Android Studio ควรซิงค์แอปเพื่อให้แน่ใจว่ามีการเพิ่มทรัพยากร Dependency ที่จำเป็นทั้งหมดแล้ว

9b58145acc4be030.png

สุดท้าย คุณควรเห็นข้อความดำเนินการสำเร็จในแผง Assistant ใน Android Studio ที่ระบุว่าทรัพยากร Dependency ทั้งหมดได้รับการตั้งค่าอย่างถูกต้อง

aa0d46fc944e0c0b.png

ขั้นตอนเพิ่มเติมคือเปิดใช้การบันทึกการแก้ไขข้อบกพร่อง โดยทำตามวิธีการในขั้นตอน "(ไม่บังคับ) เปิดใช้การบันทึกการแก้ไขข้อบกพร่อง" ดูวิธีการเดียวกันนี้ได้ในเอกสารประกอบที่เผยแพร่ต่อสาธารณะด้วย

3. เรียกใช้แอป

หากคุณผสานรวมแอปกับ Performance Monitoring SDK ได้สำเร็จ โปรเจ็กต์ก็จะคอมไพล์ได้แล้ว ใน Android Studio คลิกเรียกใช้ > เรียกใช้ "แอป" เพื่อสร้างและเรียกใช้แอปในอุปกรณ์/โปรแกรมจำลอง Android ที่เชื่อมต่ออยู่

แอปมี 2 ปุ่มที่จะนำคุณไปยังกิจกรรมและส่วนย่อยที่เกี่ยวข้อง ดังนี้

410d8686b4f45c33.png

ในขั้นตอนถัดไปของ Codelab นี้ คุณจะได้เรียนรู้วิธีวัดเวลาที่ใช้ในการโหลดและประสิทธิภาพการแสดงผลหน้าจอของกิจกรรมหรือ Fragment

4. การทำความเข้าใจการโหลดกิจกรรมหรือส่วนย่อย

ในขั้นตอนนี้ เราจะเรียนรู้ว่าระบบกำลังทำอะไรระหว่างการโหลดกิจกรรมหรือส่วนย่อย

การทำความเข้าใจการโหลดกิจกรรม

สำหรับกิจกรรม เวลาที่ใช้ในการโหลดคือเวลาที่เริ่มต้นนับตั้งแต่เมื่อมีการสร้างออบเจ็กต์กิจกรรมจนถึงเวลาที่เฟรมแรกวาดบนหน้าจออย่างครบถ้วน (คือเวลาที่ผู้ใช้จะเห็น UI ที่สมบูรณ์ของกิจกรรมเป็นครั้งแรก) หากต้องการวัดว่าแสดงแอปครบแล้วหรือยัง คุณสามารถใช้เมธอด reportFullyDrawn() เพื่อวัดเวลาที่ผ่านไประหว่างการเรียกใช้แอปพลิเคชันและการแสดงผลทรัพยากรทั้งหมดและลําดับชั้นการดูโดยสมบูรณ์

ในระดับสูง เมื่อแอปของคุณเรียกใช้ startActivity(Intent) ระบบจะดำเนินการตามขั้นตอนต่อไปนี้โดยอัตโนมัติ แต่ละขั้นตอนจะใช้เวลาในการดำเนินการ ซึ่งจะเพิ่มระยะเวลาระหว่างการสร้างกิจกรรมและเมื่อผู้ใช้เห็น UI ของกิจกรรมบนหน้าจอ

c20d14b151549937.png

การทำความเข้าใจการโหลด Fragment

เช่นเดียวกับกิจกรรม เวลาที่ใช้ในการโหลดของ Fragment คือเวลาเริ่มนับจากเวลาที่ Fragment เชื่อมโยงกับกิจกรรมของโฮสต์จนกระทั่งถึงเฟรมแรกของมุมมอง Fragment บนหน้าจออย่างสมบูรณ์

5. วัดเวลาในการโหลดกิจกรรม

ความล่าช้าในเฟรมแรกอาจทำให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี คุณจึงควรทำความเข้าใจเกี่ยวกับความล่าช้าในการโหลดครั้งแรกของผู้ใช้ คุณสามารถใช้การติดตามโค้ดที่กำหนดเองเพื่อวัดความเร็วในการโหลดนี้ได้ ดังนี้

  1. เริ่มการติดตามโค้ดที่กำหนดเอง (ชื่อ TestActivity-LoadTime) ในคลาส Activity ทันทีที่มีการสร้างออบเจ็กต์ Activity แล้ว

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 ซึ่งมี Callback 2 รายการ ได้แก่ 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 ภายหลังใน Codelab นี้

วัตถุประสงค์ของ FirstDrawListener

ในส่วนด้านบน เราได้จดทะเบียน FirstDrawListener วัตถุประสงค์ของ FirstDrawListener คือวัดเมื่อเฟรมแรกเริ่มต้นและวาดเสร็จ

โดยโมเดลนี้จะนำ ViewTreeObserver.OnDrawListener ไปใช้และลบล้าง Callback onDraw() ที่เรียกใช้เมื่อมีการวาดโครงสร้าง View จากนั้นจะสรุปผลลัพธ์เพื่อระบุ Callback ยูทิลิตี 2 รายการ onDrawingStart()และ onDrawingFinish()

ดูโค้ดที่สมบูรณ์ของ FirstDrawListener ได้ในซอร์สโค้ดของ Codelab นี้

6. วัดเวลาในการโหลดของ Fragment

การวัดเวลาที่ใช้ในการโหลดของ Fragment นั้นคล้ายกับวิธีที่เราใช้วัดสำหรับกิจกรรม แต่มีความแตกต่างเล็กน้อย ขอย้ำอีกครั้งว่าเราจะใช้การติดตามโค้ดที่กำหนดเอง ดังนี้

  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() Callback จากนั้นให้หยุดการติดตามใน 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)

🎉 ยินดีด้วย คุณวัดเวลาที่ใช้ในการโหลดของ Fragment และรายงานข้อมูลดังกล่าวไปยังการตรวจสอบประสิทธิภาพของ Firebase เรียบร้อยแล้ว เราจะดูเมตริกที่บันทึกไว้ในคอนโซล Firebase ภายหลังใน Codelab นี้

7. ทำความเข้าใจการแสดงผลหน้าจอและเฟรมที่ช้า/ค้างคืออะไร

การแสดงผล UI คือการสร้างเฟรมจากแอปและแสดงบนหน้าจอ แอปควรแสดงผลเฟรมที่น้อยกว่า 16 มิลลิวินาทีเพื่อให้ได้ 60 เฟรมต่อวินาที ( ทำไมต้องเป็น 60 FPS) หากแอปได้รับผลกระทบจากการแสดงผล UI ที่ช้า ระบบจะบังคับให้ข้ามเฟรมและผู้ใช้จะเห็นการกระตุกในแอป เราเรียกสิ่งนี้ว่าการกระตุก

ในทำนองเดียวกัน เฟรมที่ค้างคือเฟรม UI ที่ใช้เวลาในการแสดงผลนานกว่า 700 มิลลิวินาที การหน่วงเวลานี้เป็นปัญหาเนื่องจากดูเหมือนว่าแอปของคุณค้างและไม่ตอบสนองข้อมูลจากผู้ใช้เป็นเวลาเกือบ 1 วินาทีระหว่างที่เฟรมกำลังแสดงผล

8. วัดเฟรมที่ช้า/ค้างของ Fragment

การตรวจสอบประสิทธิภาพของ Firebase จะบันทึกเฟรมที่ช้า/ค้างของกิจกรรมโดยอัตโนมัติ (เฉพาะเมื่อเป็นการเร่งฮาร์ดแวร์เท่านั้น) แต่ฟีเจอร์นี้ยังไม่พร้อมใช้งานสำหรับ Fragment ในขณะนี้ เฟรมที่ช้า/ค้างของ Fragment คือเฟรมที่ช้า/ค้างของทั้งกิจกรรมระหว่างการเรียกกลับ onFragmentAttached() กับ onFragmentDetached() ในวงจรของ Fragment

ด้วยแรงจูงใจจากคลาส AppStateMonitor (ซึ่งเป็นส่วนหนึ่งของ Performance Monitoring SDK ที่รับผิดชอบในการบันทึกการติดตามหน้าจอสำหรับกิจกรรม) เราจึงใช้คลาส ScreenTrace (ซึ่งเป็นส่วนหนึ่งของที่เก็บซอร์สโค้ด Codelab นี้) สามารถเชื่อมต่อกับคลาส ScreenTrace กับการเรียกกลับในวงจรของกิจกรรม FragmentManager เพื่อจับภาพเฟรมที่ช้า/ค้างได้ คลาสนี้มี API สาธารณะ 2 รายการ ได้แก่

  • recordScreenTrace(): เริ่มบันทึกการติดตามหน้าจอ
  • sendScreenTrace(): หยุดบันทึกการติดตามหน้าจอและแนบเมตริกที่กำหนดเองเพื่อบันทึกจำนวนเฟรมทั้งหมด ที่ช้า และค้าง

การแนบเมตริกที่กำหนดเองเหล่านี้จะช่วยให้คุณจัดการการติดตามหน้าจอสำหรับ Fragment ได้ในลักษณะเดียวกับการติดตามหน้าจอสำหรับกิจกรรม และสามารถแสดงควบคู่กับการติดตามการแสดงผลหน้าจออื่นๆ ในแดชบอร์ดประสิทธิภาพของคอนโซล Firebase

วิธีบันทึกการติดตามหน้าจอสำหรับ Fragment มีดังนี้

  1. เริ่มต้นคลาส ScreenTrace ในกิจกรรมที่โฮสต์ Fragment

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. เมื่อคุณโหลด Fragment ให้ลงทะเบียนสำหรับ FragmentLifecycleCallbacks และลบล้าง onFragmentAttached() และ onFragmentDetached() Callback เราทำสิ่งนี้ให้คุณแล้ว คุณต้องเริ่มบันทึกการติดตามหน้าจอใน Callback onFragmentAttached() และหยุดบันทึกใน Callback 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 รอสัก 2-3 วินาที แล้วคลิก 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

🎉 ยินดีด้วย คุณวัดเฟรม "ช้า/ค้าง" ของ Fragment และรายงานข้อมูลดังกล่าวไปยังการตรวจสอบประสิทธิภาพของ Firebase เรียบร้อยแล้ว เราจะดูเมตริกที่บันทึกไว้ในคอนโซล Firebase ภายหลังใน Codelab นี้

9. ตรวจสอบเมตริกในคอนโซล Firebase

  1. ใน Logcat ให้คลิก URL ของคอนโซล Firebase เพื่อไปที่หน้ารายละเอียดสำหรับการติดตาม ceb9d5ba51bb6e89.jpeg

หรือเลือกโปรเจ็กต์ที่มีแอปของคุณในคอนโซล Firebase ในแผงด้านซ้าย ให้ค้นหารุ่นและ ตรวจสอบ แล้วคลิกประสิทธิภาพ

  • ในแท็บแดชบอร์ดหลัก ให้เลื่อนลงไปที่ตารางการติดตาม แล้วคลิกแท็บการติดตามที่กำหนดเอง ในตารางนี้ คุณจะเห็นการติดตามโค้ดที่กำหนดเองซึ่งเพิ่มไว้ก่อนหน้านี้ และการติดตามที่พร้อมใช้งานทันทีบางส่วน เช่น การติดตาม _app_start
  • หาการติดตามโค้ดที่กำหนดเอง 2 รายการ ได้แก่ TestActivity-LoadTime และ TestFragment-LoadTime คลิกที่ระยะเวลาของระยะเวลาใดก็ได้เพื่อดูรายละเอียดเพิ่มเติมเกี่ยวกับข้อมูลที่เก็บรวบรวม

a0d8455c5269a590.png

  1. หน้ารายละเอียดสำหรับการติดตามโค้ดที่กำหนดเองจะแสดงข้อมูลเกี่ยวกับระยะเวลาของการติดตาม (นั่นคือเวลาในการโหลดที่วัดได้)

5e92a307b7410d8b.png

  1. นอกจากนี้ คุณยังดูข้อมูลประสิทธิภาพสำหรับการติดตามหน้าจอที่กําหนดเองได้ด้วย
  • กลับไปที่แท็บแดชบอร์ดหลัก เลื่อนลงไปยังตารางการติดตาม แล้วคลิกแท็บการแสดงผลหน้าจอ ในตารางนี้ คุณจะเห็นการติดตามหน้าจอที่กำหนดเองซึ่งเพิ่มไว้ก่อนหน้านี้ รวมถึงการติดตามหน้าจอที่พร้อมใช้งานทันที เช่น การติดตาม MainActivity
  • ค้นหาการติดตามหน้าจอที่กำหนดเองของคุณ MainActivity-TestFragment คลิกชื่อการติดตามเพื่อดูข้อมูลรวมของการแสดงผลช้าและเฟรมที่ค้าง

Ee7890c7e2c28740.png

10. ขอแสดงความยินดี

ยินดีด้วย คุณวัดเวลาในการโหลดและประสิทธิภาพการแสดงผลหน้าจอของกิจกรรมและส่วนย่อยสำเร็จแล้วโดยใช้การตรวจสอบประสิทธิภาพของ Firebase

ความสำเร็จของคุณ

ขั้นตอนถัดไป

ประสิทธิภาพของ Firebase มีวิธีวัดประสิทธิภาพของแอปมากกว่าการติดตามที่กำหนดเอง โดยจะวัดข้อมูลประสิทธิภาพในการเริ่มต้นแอป การมีส่วนร่วมในแอป และข้อมูลในเบื้องหลังโดยอัตโนมัติ ได้เวลาตรวจสอบเมตริกเหล่านี้ในคอนโซล Firebase แล้ว

นอกจากนี้ Firebase Performance ยังมีการตรวจสอบคำขอเครือข่าย HTTP/S โดยอัตโนมัติอีกด้วย วิธีนี้ทำให้คุณวัดคุมคำขอเครือข่ายได้ง่ายๆ โดยไม่ต้องเขียนโค้ดแม้สักบรรทัดเดียว ลองส่งคำขอเครือข่ายจากแอปแล้วค้นหาเมตริกในคอนโซล Firebase ได้ไหม

โบนัส

ตอนนี้คุณทราบวิธีวัดเวลาที่ใช้ในการโหลดและประสิทธิภาพการแสดงผลหน้าจอของกิจกรรม/ส่วนย่อยโดยใช้การติดตามโค้ดที่กำหนดเองแล้ว ลองดูฐานโค้ดแบบโอเพนซอร์ส เพื่อดูว่าคุณจะจับเมตริกเหล่านี้ไว้ในกล่องสำหรับกิจกรรม/ส่วนย่อยที่เป็นส่วนหนึ่งของแอปได้หรือไม่ ส่ง PR มาได้เลยถ้าต้องการ :-)

11. การเรียนรู้เพิ่มเติม

การทำความเข้าใจสิ่งที่เกิดขึ้นระหว่างการโหลดกิจกรรมจะช่วยให้คุณเข้าใจลักษณะประสิทธิภาพของแอปได้ดียิ่งขึ้น ในขั้นตอนก่อนหน้า เราอธิบายสิ่งที่เกิดขึ้นระหว่างการโหลดกิจกรรมในระดับสูง แต่แผนภาพต่อไปนี้จะอธิบายแต่ละขั้นตอนอย่างละเอียดมากขึ้น

cd61c1495fad7961.png