การตรวจหาความหน่วงของ UI

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

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

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

สำหรับแอป Compose ให้ใช้ขั้นตอนในคู่มือนี้เมื่อต้องการดูภาพรวมระดับมาโครของแอป System Tracingที่แนะนำในที่นี้จะช่วยคุณระบุการกระตุกที่เกิดจากปัญหาในระดับระบบที่บล็อกเทรดหลัก เช่น I/O ของดิสก์จำนวนมาก ระบบจัดการหน่วยความจำที่ไม่ใช้แล้วแบบรุก หรือจุดคอขวดในการแสดงผล GPU ใช้คู่มือประสิทธิภาพของ Jetpack Compose หากคุณแยกการกระตุกไปยังเลเยอร์ UI ได้แล้ว คู่มือดังกล่าวจะช่วยคุณแก้ไขปัญหาการทำงานที่ไม่มีประสิทธิภาพเฉพาะของ Compose เช่น การคอมโพสซ้ำมากเกินไป การอ่านสถานะในระยะที่ไม่ถูกต้อง หรือการใช้พารามิเตอร์ที่ไม่เสถียร

ตรวจหาการกระตุกใน Android 12 ขึ้นไป

สำหรับอุปกรณ์ที่ใช้ Android 12 (ระดับ API 31) ขึ้นไป ระบบจะแสดงการติดตามที่บันทึกไว้ในแทร็กเฟรมที่กระตุก ใต้บานหน้าต่างการแสดงผล ในเครื่องมือสร้างโปรไฟล์ CPU

วิธีตรวจหาการกระตุก

1. ใน Android Studio ให้เลือกมุมมอง > หน้าต่างเครื่องมือ > โปรไฟล์ หรือคลิก โปรไฟล์ ในแถบเครื่องมือ

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

2. คลิกที่ใดก็ได้ในไทม์ไลน์ CPU เพื่อเปิดเครื่องมือสร้างโปรไฟล์ CPU

3. เลือกSystem Trace จากเมนูการกำหนดค่าในเครื่องมือสร้างโปรไฟล์ CPU แล้วคลิกบันทึก หลังจากโต้ตอบกับแอปเสร็จแล้ว ให้คลิกหยุด

4. คุณควรเห็นแท็บเฟรมที่กระตุก ในส่วนการแสดงผล โดยค่าเริ่มต้น Profiler จะแสดงเฉพาะเฟรมที่กระตุกเป็นรายการที่ควรตรวจสอบ ภายในเฟรมที่กระตุกแต่ละเฟรม ส่วนสีแดงจะไฮไลต์ระยะเวลาที่เฟรมใช้เกินกำหนดเวลาแสดงผล

5. เมื่อพบเฟรมที่กระตุกแล้ว ให้คลิกเฟรมดังกล่าว หรือจะกด M เพื่อปรับการซูมให้โฟกัสที่เฟรมที่เลือกก็ได้ ระบบจะไฮไลต์เหตุการณ์ที่เกี่ยวข้องในเธรดต่อไปนี้ ได้แก่ เธรดหลัก RenderThread และ GPU completion

6. คุณเลือกดูเฟรมทั้งหมดหรือรายละเอียดเวลาในการแสดงผลได้โดย สลับช่องทำเครื่องหมาย เฟรมทั้งหมด และ วงจร ตามลำดับ

ตรวจหาการกระตุกใน Android 11

สำหรับอุปกรณ์ที่ใช้ Android 11 (ระดับ API 30) ระบบจะแสดงการติดตามที่บันทึกไว้ในส่วนวงจรเฟรม ในเครื่องมือสร้างโปรไฟล์ CPU

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

1. วงจรเฟรม (ชื่อเลเยอร์): ชื่อส่วนจะมีชื่อเลเยอร์ อยู่ในวงเล็บ เลเยอร์ คือหน่วยการคอมโพสหน่วยเดียว
2. แอปพลิเคชัน: แท็บนี้แสดงเวลาตั้งแต่แอปนำบัฟเฟอร์ออกจากคิว จนถึงเวลาที่นำบัฟเฟอร์กลับเข้าคิว ซึ่งโดยปกติแล้วจะสอดคล้องกับเหตุการณ์การติดตามใน RenderThread
3. รอ GPU: แท็บนี้แสดงระยะเวลาที่ GPU เป็นเจ้าของบัฟเฟอร์ ซึ่งเป็นเวลาตั้งแต่ส่งบัฟเฟอร์ไปยัง GPU จนถึงเวลาที่ GPU ทำงานกับบัฟเฟอร์เสร็จ แท็บนี้ไม่ได้ระบุว่า GPU ทำงานกับบัฟเฟอร์นี้เท่านั้นในช่วงเวลาดังกล่าว หากต้องการดูข้อมูลโดยละเอียดเกี่ยวกับสิ่งที่ GPU ทำงานในช่วงเวลาหนึ่งๆ คุณอาจต้องใช้ Android GPU Inspector
4. การคอมโพส: แท็บนี้แสดงเวลาตั้งแต่ SurfaceFlinger ล็อกบัฟเฟอร์และส่งบัฟเฟอร์สำหรับการคอมโพส จนถึงเวลาที่ส่งบัฟเฟอร์ ไปยังจอแสดงผล
5. เฟรมบนจอแสดงผล: แทร็กนี้แสดงระยะเวลาที่เฟรมปรากฏบน หน้าจอ

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

นอกจากนี้ Android Studio ยังแสดงเฟรมทั้งหมดในการติดตามในรูปแบบตารางในแท็บเฟรมทั้งหมด

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

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

หากต้องการตรวจหาและตรวจสอบการกระตุกใน Android 11 ให้ทำตามขั้นตอนต่อไปนี้

1. จัดเรียงตารางเฟรมทั้งหมด ตามคอลัมน์แอปพลิเคชัน ตามลำดับจากมากไปน้อย เพื่อให้เฟรมที่ใช้เวลานานที่สุดปรากฏขึ้นก่อน

   

2. ค้นหาเฟรมที่ทำงานนานที่สุดแล้วเลือกแถวในตาราง ซึ่งจะซูมเข้าที่เฟรมที่เลือกในมุมมองไทม์ไลน์ทางด้านซ้าย

   

3. มองหาเธรดที่เกี่ยวข้องในส่วนวงจรเฟรม และเธรด

   

ตรวจหาการกระตุกใน Android 10 ลงไป

สำหรับอุปกรณ์ที่ใช้ Android 10 (ระดับ API 29) ลงไป ระบบจะแสดงข้อมูลไปป์ไลน์กราฟิกของระบบปฏิบัติการที่เกี่ยวข้องในส่วนเดียวในการติดตามระบบของเครื่องมือสร้างโปรไฟล์ CPU ที่เรียกว่าการแสดงผล

• เฟรม: ส่วนนี้แสดงเหตุการณ์การติดตามเธรด UI และ RenderThread เหตุการณ์การติดตาม ในแอป เหตุการณ์ที่นานกว่า 16 มิลลิวินาทีจะมีสีแดงเพื่อไฮไลต์ เฟรมที่อาจกระตุกเนื่องจากเหตุการณ์ดังกล่าวใช้เวลาเกินกำหนดเวลาในการแสดงผลที่ 60 เฟรมต่อวินาที (fps)
• SurfaceFlinger: ส่วนนี้แสดงเวลาที่ SurfaceFlinger ประมวลผล บัฟเฟอร์เฟรม SurfaceFlinger เป็นกระบวนการของระบบที่มีหน้าที่ส่งบัฟเฟอร์ไปยังจอแสดงผล
• VSYNC: ส่วนนี้แสดง VSYNC ซึ่งเป็นสัญญาณที่ซิงค์ไปป์ไลน์การแสดงผล แท็บจะแสดงสัญญาณ VSYNC-app ซึ่งแสดงเวลาที่แอปเริ่มทำงานช้าเกินไป โดยปกติแล้วเหตุการณ์นี้จะเกิดขึ้นเนื่องจากเธรด UI ไม่ว่าง ซึ่งจะทำให้เกิดภาพกะพริบที่มองเห็นได้บนหน้าจอระหว่างภาพเคลื่อนไหว และเพิ่มเวลาในการตอบสนองต่ออินพุตเพิ่มเติมจนกว่าภาพเคลื่อนไหวหรือการเลื่อนจะเสร็จสมบูรณ์ ส่วนนี้มีความสำคัญอย่างยิ่งในการดูจอแสดงผลที่มีอัตราการรีเฟรชสูง เนื่องจากอาจเกิดขึ้นบ่อยกว่า 60 ครั้งต่อวินาทีหรือในอัตราที่ผันแปร
• BufferQueue: ส่วนนี้แสดงจำนวนบัฟเฟอร์เฟรมที่เข้าคิวและ รอให้ SurfaceFlinger ใช้ สำหรับแอปที่ทำให้ใช้งานได้ในอุปกรณ์ที่ใช้ Android 9 (ระดับ API 28) ขึ้นไป แท็บนี้จะแสดงจำนวนบัฟเฟอร์ของ BufferQueue พื้นผิวของแอป (0, 1, หรือ 2) BufferQueue ช่วยให้คุณเข้าใจสถานะของบัฟเฟอร์รูปภาพขณะที่บัฟเฟอร์เคลื่อนที่ระหว่างคอมโพเนนต์กราฟิกของ Android เช่น ค่า 2 หมายความว่าแอปใช้บัฟเฟอร์ 3 เท่าในปัจจุบัน ซึ่งส่งผลให้เวลาในการตอบสนองต่ออินพุตเพิ่มขึ้น

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

ในรูปภาพด้านบน ส่วนเธรด จะแสดงเธรด UI (java.com.google.samples.apps.iosched), RenderThread และเธรด GPU completion ซึ่งเป็นเธรดที่เกี่ยวข้องกับการแสดงผล UI และอาจทำให้เกิดการกระตุก

หากต้องการตรวจหาการกระตุกใน Android 10 ลงไป ให้ทำตามขั้นตอนต่อไปนี้

1. ดูแท็บเฟรม ในการแสดงผล เฟรมสีแดงเป็นรายการที่ควรตรวจสอบ

   

2. เมื่อพบเฟรมที่อาจกระตุก ให้ซูมเข้าโดยกด W หรือ เลื่อนล้อเมาส์ขณะกด Control (Command ใน macOS) ซูมเข้าต่อไปจนกว่าจะเริ่มเห็นเหตุการณ์การติดตามในเธรด UI และ RenderThread

   

   ในรูปภาพด้านบน Choreographer#doFrame แสดงเวลาที่เธรด UI เรียก Choreographer เพื่อประสานงานภาพเคลื่อนไหว, เลย์เอาต์มุมมอง, การวาดรูปภาพ, และกระบวนการที่เกี่ยวข้อง DrawFrames แสดงเวลาที่ RenderThread สร้างและออกคำสั่งการวาดจริงไปยัง GPU

3. หากเห็นเหตุการณ์การติดตามที่ยาวเป็นพิเศษในเทรดหลัก ให้ซูมเข้าเพื่อดูว่าคอมโพเนนต์ UI หรือฟังก์ชันที่ประกอบกันได้ใดที่ทำให้เฟรมล่าช้า

การตรวจสอบขั้นสูงด้วย Perfetto

งานการสร้างโปรไฟล์การติดตามระบบของ Android Studio ทำงานโดย Perfetto หากคุณกำลังจัดการกับปัญหาการแสดงผลที่ซับซ้อนและต้องการคําค้นหา SQL ที่กำหนดเองหรือการนำทางไทม์ไลน์ขั้นสูง คุณสามารถทำการวิเคราะห์การติดตามนอก IDE ได้

ส่งออกการติดตามระบบจาก Android Studio โดยคลิกไอคอนส่งออกการติดตาม ในบานหน้าต่าง Profiler แล้วลากไฟล์ที่ได้ไปยัง UI ของ Perfetto บนเว็บ ซึ่งจะมอบสภาพแวดล้อมเฉพาะสำหรับการวิเคราะห์ประสิทธิภาพระดับระบบ หากต้องการดูข้อมูลเกี่ยวกับวิธีตีความรายละเอียดของไปป์ไลน์กราฟิกของระบบปฏิบัติการ เช่น VSYNC, SurfaceFlinger และแท็บไทม์ไลน์เฟรม โปรดดูเอกสารประกอบอย่างเป็นทางการของ Perfetto

ดูข้อมูลเพิ่มเติม

หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีลดการกระตุก โปรดดู แหล่งที่มาของการกระตุกที่พบบ่อย