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

1. บทนำ

ปรับปรุงล่าสุด: 2021-03-11

ทำไมเราต้องวัดประสิทธิภาพของ Views?

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

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

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

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

  • วิธีเพิ่ม Firebase Performance Monitoring ให้กับแอพ Android
  • ทำความเข้าใจเกี่ยวกับการโหลดของกิจกรรมหรือชิ้นส่วน
  • วิธีการใช้เครื่องมือติดตามโค้ดที่กำหนดเองเพื่อวัดเวลาโหลดของกิจกรรมหรือ 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

หากคุณไม่มีคอมไพล์ในเครื่อง คุณสามารถดาวน์โหลดโค้ดได้โดยตรงจาก GitHub

นำเข้าโครงการ measure-view-performance-start เข้าสู่ Android Studio คุณอาจเห็นข้อผิดพลาดในการรวบรวมหรืออาจมีคำเตือนเกี่ยวกับไฟล์ google-services.json ที่หายไป เราจะแก้ไขในส่วนถัดไปของขั้นตอนนี้

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

เชื่อมต่อแอปของคุณกับ Firebase

  1. ไปที่ Android Studio / Help > Check for updates เพื่อให้แน่ใจว่าคุณกำลังใช้ 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 คุณจะได้เรียนรู้วิธีวัดเวลาในการโหลดและประสิทธิภาพการแสดงผลหน้าจอของกิจกรรมหรือส่วนย่อยของคุณ

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

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

ทำความเข้าใจเกี่ยวกับการโหลดกิจกรรม

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

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

c20d14b151549937.png

ทำความเข้าใจเกี่ยวกับการโหลดของ Fragment

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

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 ซึ่งมีการเรียกกลับสองครั้ง: 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

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

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

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

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

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

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

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

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

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

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

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

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

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