ใช้เฉพาะพร็อพเพอร์ตี้ที่ใช้คอมโพสิเตอร์เท่านั้นและจัดการจำนวนเลเยอร์

การจัดองค์ประกอบคือการนำส่วนที่ลงสีของหน้ามารวมกันเพื่อแสดงบนหน้าจอ ภาพเคลื่อนไหวที่ไม่ได้ทำการ Composite ต้องใช้การทำงานมากกว่าและอาจปรากฏเป็นภาพกระตุก (ไม่ราบรื่น) ในโทรศัพท์ระดับล่างหรือเมื่อมีงานที่ใช้ประสิทธิภาพสูงทำงานในเทรดหลัก

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

สรุป

• ใช้การเปลี่ยนแปลงการเปลี่ยนรูปแบบและความทึบแสงสำหรับภาพเคลื่อนไหว
• โปรโมตองค์ประกอบที่เคลื่อนไหวด้วย will-change หรือ translateZ
• หลีกเลี่ยงการใช้กฎการโปรโมตมากเกินไป เนื่องจากเลเยอร์ต้องใช้หน่วยความจำและการจัดการ

ใช้การเปลี่ยนแปลงการเปลี่ยนรูปแบบและความทึบแสงสำหรับภาพเคลื่อนไหว

ไปป์ไลน์พิกเซลเวอร์ชันที่มีประสิทธิภาพดีที่สุดจะหลีกเลี่ยงทั้งเลย์เอาต์และการวาด และต้องใช้การเปลี่ยนแปลงการจัดองค์ประกอบเท่านั้น

เพื่อให้บรรลุเป้าหมายนี้ คุณจะต้องยึดติดกับการเปลี่ยนแปลงพร็อพเพอร์ตี้ที่จัดการได้โดยตัวจัดองค์ประกอบเพียงอย่างเดียว ปัจจุบันมีพร็อพเพอร์ตี้เพียง 2 รายการเท่านั้นที่ใช้ได้กับกรณีนี้ ได้แก่ transform และ opacity

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

โปรโมตองค์ประกอบที่คุณวางแผนจะทำให้เคลื่อนไหว

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

.moving-element {
  will-change: transform;
}

หรือสำหรับเบราว์เซอร์รุ่นเก่าหรือเบราว์เซอร์ที่ไม่รองรับ will-change ให้ใช้โค้ดต่อไปนี้

.moving-element {
  transform: translateZ(0);
}

จัดการเลเยอร์และหลีกเลี่ยงการเพิ่มเลเยอร์มากเกินไป

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

* {
  will-change: transform;
  transform: translateZ(0);
}

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

ใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อทำความเข้าใจเลเยอร์ในแอป

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

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

การคลิกที่นี่จะแสดงตัวเลือกใหม่ในรายละเอียด ซึ่งก็คือแท็บเลเยอร์

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

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