การเขียนเฟสและประสิทธิภาพ

เมื่อ Compose อัปเดตเฟรม จะมี 3 ขั้นตอนดังนี้

  • การจัดองค์ประกอบ: Compose จะกำหนดสิ่งที่จะแสดง โดยจะเรียกใช้ฟังก์ชันที่ประกอบกันได้ และสร้างแผนผัง UI
  • เลย์เอาต์: Compose จะกำหนดขนาดและตำแหน่งของแต่ละองค์ประกอบใน แผนผัง UI
  • การวาด: Compose จะแสดงผลองค์ประกอบ UI แต่ละรายการจริงๆ

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

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

ดูข้อมูลเพิ่มเติมได้ที่คู่มือระยะต่างๆ ของ Jetpack Compose

หลักการทั่วไป

หลักการกว้างๆ 2 ข้อที่คุณควรปฏิบัติตามเพื่อปรับปรุงประสิทธิภาพโดยรวมมีดังนี้

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

แหล่งข้อมูลเพิ่มเติม