การประกอบภาพคือการนำส่วนต่างๆ ของหน้าเว็บมารวมไว้ด้วยกันเพื่อแสดงบนหน้าจอ
การจัดองค์ประกอบคือการนำส่วนต่างๆ ของหน้าเว็บมารวมไว้ด้วยกันเพื่อแสดงบนหน้าจอ
มีปัจจัยหลัก 2 ประการในด้านนี้ที่ส่งผลต่อประสิทธิภาพของหน้าเว็บ ได้แก่ จำนวนเลเยอร์องค์ประกอบที่จำเป็นต้องจัดการ และคุณสมบัติที่คุณใช้สำหรับภาพเคลื่อนไหว
สรุป
- พยายามทำตามการเปลี่ยนแปลงการเปลี่ยนรูปแบบและความทึบแสงของภาพเคลื่อนไหว
- โปรโมตการย้ายองค์ประกอบด้วย
will-changeหรือtranslateZ - หลีกเลี่ยงการใช้กฎการโปรโมตมากเกินไป เลเยอร์ต้องใช้หน่วยความจำและการจัดการ
ใช้การเปลี่ยนแปลงการเปลี่ยนรูปแบบและความทึบแสงสำหรับภาพเคลื่อนไหว
ไปป์ไลน์พิกเซลเวอร์ชันที่มีประสิทธิภาพที่สุดจะหลีกเลี่ยงทั้งเลย์เอาต์และสี และต้องใช้การเปลี่ยนแปลงคอมโพเนนต์เท่านั้น ดังนี้
ในการจะบรรลุเป้าหมายนี้ คุณต้องยึดคุณสมบัติการเปลี่ยนแปลงที่ตัวคอมโพสิเตอร์เพียงอย่างเดียวสามารถจัดการได้ ปัจจุบันมีเพียง 2 พร็อพเพอร์ตี้เท่านั้นที่เป็นความจริง นั่นคือ transform และ opacity:
คำเตือนสำหรับการใช้ transform และ opacity คือองค์ประกอบที่คุณเปลี่ยนคุณสมบัติเหล่านี้ควรอยู่ในเลเยอร์ตัวประกอบเอง ในการสร้างเลเยอร์ คุณต้องโปรโมตองค์ประกอบซึ่งเราจะพูดถึงถัดไป
โปรโมตองค์ประกอบที่คุณวางแผนจะทำเป็นภาพเคลื่อนไหว
ดังที่เราได้กล่าวไว้ในส่วน "ลดความซับซ้อนของสีและลดพื้นที่ที่ลงสี" คุณควรโปรโมตองค์ประกอบที่คุณวางแผนจะทำภาพเคลื่อนไหว (อย่าให้มากเกินไปจนเกินไป) ไปยังเลเยอร์ขององค์ประกอบนั้นๆ ดังนี้
.moving-element {
will-change: transform;
}
หรือสำหรับเบราว์เซอร์รุ่นเก่าหรือเบราว์เซอร์ที่ไม่รองรับจะไม่มีการเปลี่ยนแปลง ดังนี้
.moving-element {
transform: translateZ(0);
}
จัดการเลเยอร์และหลีกเลี่ยงการระเบิดของเลเยอร์
บางทีคุณอาจจะอยากทราบว่าเลเยอร์มักจะช่วยเพิ่มประสิทธิภาพได้ เพื่อโปรโมตองค์ประกอบทั้งหมดในหน้าเว็บด้วยสิ่งต่อไปนี้
* {
will-change: transform;
transform: translateZ(0);
}
ซึ่งเป็นวิธีบอกว่าคุณต้องการโปรโมตทุกๆ องค์ประกอบบนหน้าเว็บ ปัญหาก็คือ ทุกเลเยอร์ที่คุณสร้างต้องใช้หน่วยความจำและการจัดการ ซึ่งทำงานได้ไม่เสียค่าใช้จ่าย อันที่จริง บนอุปกรณ์ที่มีหน่วยความจำจำกัด ผลกระทบต่อประสิทธิภาพอาจเยอะกว่าการสร้างเลเยอร์อย่างมาก ทุกพื้นผิวของเลเยอร์ต้องอัปโหลดไปยัง GPU เพื่อให้มีข้อจำกัดเพิ่มเติมในแง่ของแบนด์วิดท์ระหว่าง CPU และ GPU รวมถึงหน่วยความจำที่ใช้ได้สำหรับพื้นผิวใน GPU
ใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อทำความเข้าใจเลเยอร์ต่างๆ ในแอป
หากต้องการทำความเข้าใจเกี่ยวกับเลเยอร์ในแอปพลิเคชันของคุณ และเหตุผลที่องค์ประกอบมีเลเยอร์ คุณต้องเปิดใช้เครื่องมือสร้างโปรไฟล์ Paint ในไทม์ไลน์ของ Chrome DevTools โดยทำดังนี้
เมื่อเปิดโหมดนี้ คุณควรทำการบันทึกเสียง เมื่อบันทึกเสร็จแล้ว คุณจะคลิกแต่ละเฟรมได้ ซึ่งจะอยู่ระหว่างแถบเฟรมต่อวินาทีและรายละเอียด
เมื่อคลิกตัวเลือกนี้ จะมีตัวเลือกใหม่ให้คุณในรายละเอียด นั่นคือแท็บเลเยอร์
ตัวเลือกนี้จะแสดงมุมมองใหม่ที่ช่วยให้คุณสามารถเลื่อน สแกน และซูมเข้าเลเยอร์ทั้งหมดในเฟรมนั้น พร้อมกับเหตุผลที่สร้างเลเยอร์แต่ละเลเยอร์ขึ้น
เมื่อใช้มุมมองนี้ คุณจะสามารถติดตามจำนวนเลเยอร์ที่คุณมี หากใช้เวลานานในการประสานระหว่างการดำเนินการที่ต้องการประสิทธิภาพ เช่น การเลื่อนหรือการเปลี่ยน (คุณควรกำหนดไว้ประมาณ 4-5 มิลลิวินาที) คุณสามารถใช้ข้อมูลที่นี่เพื่อดูจำนวนเลเยอร์ สาเหตุที่สร้าง และจัดการจำนวนเลเยอร์ในแอปได้จากส่วนนี้