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

1. บทนำ

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

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

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

Firebase Performance Monitoring ไม่ได้ให้เมตริกประสิทธิภาพเหล่านี้พร้อมใช้งานเลยใช่ไหม

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

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

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

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

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

  1. ไปที่ Android Studio/Help > Check for updates เพื่อให้แน่ใจว่าคุณใช้ Android Studio และ Firebase Assistant เวอร์ชันล่าสุด
  2. เลือกเครื่องมือ > Firebase เพื่อเปิดแผงผู้ช่วย
    e791bed0999db1e0.png
  3. เลือก Performance Monitoring เพื่อเพิ่มลงในแอป แล้วคลิกเริ่มต้นใช้งาน Performance Monitoring
  4. คลิกปุ่มเพื่อสร้างโปรเจ็กต์ใหม่ แล้วป้อนชื่อโปรเจ็กต์ (เช่น Measure Performance Codelab)
  5. คลิกต่อไป
  6. หากได้รับแจ้ง ให้อ่านและยอมรับข้อกำหนดของ Firebase แล้วคลิกต่อไป
  7. (ไม่บังคับ) เปิดใช้ความช่วยเหลือจาก AI ในคอนโซล Firebase (เรียกว่า "Gemini ใน Firebase")
  8. สำหรับ Codelab นี้ คุณไม่จำเป็นต้องใช้ Google Analytics ดังนั้นให้ปิดตัวเลือก Google Analytics
  9. จากนั้นคุณจะเห็นกล่องโต้ตอบเพื่อเชื่อมต่อแอป Firebase ใหม่กับโปรเจ็กต์ Android Studio
    42c498d28ead2b77.png
  10. กลับไปที่ Android Studio ในแผงผู้ช่วย คุณควรเห็นการยืนยันว่าแอปเชื่อมต่อกับ Firebase แล้ว
    dda8bdd9488167a0.png

เพิ่ม Performance Monitoring ลงในแอป

ในแผงผู้ช่วยใน Android Studio ให้คลิกเพิ่ม Performance Monitoring ลงในแอป

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

9b58145acc4be030.png

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

aa0d46fc944e0c0b.png

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

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

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

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

410d8686b4f45c33.png

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

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

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

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

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

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

c20d14b151549937.png

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

คล้ายกับ Activity เวลาในการโหลด Fragment จะกำหนดเป็นเวลาที่เริ่มต้นตั้งแต่ตอนที่ Fragment แนบกับ Activity โฮสต์ไปจนถึงตอนที่เฟรมแรกสำหรับ Fragment View วาดบนหน้าจอเสร็จสมบูรณ์

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()การเรียกกลับ และรับ 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 ซึ่งมี 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 ในภายหลังในโค้ดแล็บนี้

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

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

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

คุณดูโค้ดทั้งหมดสำหรับ FirstDrawListener ได้ในซอร์สโค้ดของโค้ดแล็บนี้

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

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

  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 Performance Monitoring ได้สำเร็จแล้ว เราจะดูเมตริกที่บันทึกไว้ในคอนโซล Firebase ในภายหลังในโค้ดแล็บนี้

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

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

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

8. วัดเฟรมที่ช้า/หยุดทำงานของ Fragment

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

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

🎉 ยินดีด้วย คุณวัดเฟรมช้า/หยุดชั่วคราวสําหรับ Fragment และรายงานข้อมูลนั้นไปยัง Firebase Performance Monitoring เรียบร้อยแล้ว เราจะดูเมตริกที่บันทึกไว้ในคอนโซล 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. ขอแสดงความยินดี

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

สิ่งที่คุณทำสำเร็จ

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

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

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

โบนัส

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

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

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

cd61c1495fad7961.png