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