ใช้คุณสมบัติเฉพาะคอมโพเนนต์และจัดการจำนวนเลเยอร์

การคอมโพสคือการรวมชิ้นส่วนของหน้าเว็บที่วาดไว้เข้าด้วยกันเพื่อแสดงบนหน้าจอ

การคอมโพสคือการรวมชิ้นส่วนที่วาดไว้ของหน้าเว็บเข้าด้วยกันเพื่อแสดงบนหน้าจอ

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

สรุป

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

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

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

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