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

การประกอบหน้าเว็บคือจุดที่ส่วนที่วาดของหน้าเว็บมาประกอบกันเพื่อแสดงบนหน้าจอ

Paul Lewis

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

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

สรุป

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

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

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

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

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

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

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

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

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