วัดเวลาในการโหลดและการเรนเดอร์หน้าจอด้วย Firebase Performance Monitoring

1. บทนำ

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

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

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

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

การตรวจสอบประสิทธิภาพ Firebase จะรวบรวมข้อมูลประสิทธิภาพบางอย่างโดยอัตโนมัติทันที เช่น เวลาเริ่มต้นแอปของคุณ (เช่น เวลาโหลดสำหรับกิจกรรม แรก ของคุณเท่านั้น) และประสิทธิภาพการแสดงผลหน้าจอ (เช่น เฟรมที่ช้าและค้างสำหรับกิจกรรม แต่ไม่ใช่สำหรับ ชิ้นส่วน) อย่างไรก็ตาม แอปในอุตสาหกรรมมักไม่มีกิจกรรมมากมาย แต่มีกิจกรรมเดียวและหลายส่วน นอกจากนี้ แอปจำนวนมากมักจะใช้มุมมองที่กำหนดเองของตนเองสำหรับกรณีการใช้งานที่ซับซ้อนมากขึ้น ดังนั้นจึงมักจะเป็นประโยชน์ที่จะเข้าใจวิธีวัดเวลาในการโหลดและประสิทธิภาพการแสดงผลหน้าจอของทั้งกิจกรรมและแฟรกเมนต์โดยการติดตั้ง การติดตามโค้ดแบบกำหนดเอง ในแอปของคุณ คุณสามารถขยาย 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 และเพิ่มไฟล์การกำหนดค่า 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. เรียกใช้แอป

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

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

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() และรับ View เพิ่มโดยเมธอด 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 ด้วย " Logging Trace Metric " แตะที่ปุ่ม LOAD ACTIVITY และมองหาบันทึกดังต่อไปนี้:
I/FirebasePerformance: Logging trace metric: TestActivity-LoadTime (duration: XXXms)

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

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

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

มันใช้ ViewTreeObserver.OnDrawListener และแทนที่การเรียกกลับ onDraw() ซึ่งถูกเรียกใช้เมื่อแผนผัง View กำลังจะถูกสร้างขึ้น จากนั้นจะล้อมผลลัพธ์เพื่อให้มีฟังก์ชันเรียกกลับสองตัว onDrawingStart() และ onDrawingFinish()

โค้ดที่สมบูรณ์สำหรับ FirstDrawListener สามารถพบได้ใน ซอร์สโค้ดของ Codelab นี้

6. วัดเวลาในการโหลดของชิ้นส่วน

การวัดเวลาในการโหลดของ 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() จากนั้น เช่นเดียวกับตัวอย่างกิจกรรม ให้หยุดการติดตามใน 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 ด้วย " Logging Trace Metric " แตะที่ปุ่ม LOAD FRAGMENT และมองหาบันทึกดังนี้:
I/FirebasePerformance: Logging trace metric: TestFragment-LoadTime (duration: XXXms)

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

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

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

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

8. วัดเฟรมที่ช้า/ค้างของแฟรกเมนต์

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

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

  • 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() เราได้ทำสิ่งนี้เพื่อคุณ คุณต้องเริ่มการบันทึกการติดตามหน้าจอในการเรียกกลับ 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 ด้วย " Logging Trace metric " จากนั้นมองหาบันทึกดังนี้:

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 ในภายหลังใน Codelab นี้

9. ตรวจสอบตัวชี้วัดในคอนโซล Firebase

  1. ใน logcat ให้คลิก URL คอนโซล Firebase เพื่อไปที่หน้ารายละเอียดเพื่อดูการติดตาม ceb9d5ba51bb6e89.jpeg

หรือใน คอนโซล Firebase ให้เลือกโปรเจ็กต์ที่มีแอปของคุณ ในแผงด้านซ้าย ให้ค้นหาส่วน Release & Monitor จากนั้นคลิก Performance

  • ใน แท็บแดชบอร์ด หลัก เลื่อนลงไปที่ตารางการติดตาม จากนั้นคลิกแท็บ การติดตามแบบกำหนดเอง ในตารางนี้ คุณจะเห็นการติดตามโค้ดที่กำหนดเองที่เราเพิ่มไว้ก่อนหน้านี้ พร้อมด้วย การติดตามที่พร้อมใช้งานทันที เช่น การติดตาม _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 ได้ไหม

โบนัส

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

11. การเรียนรู้โบนัส

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

cd61c1495fad7961.png