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

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

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

มีปัจจัยหลัก 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 ไทม์ไลน์:

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

เมื่อคลิกตัวเลือกนี้ คุณจะเห็นตัวเลือกใหม่ในรายละเอียด นั่นก็คือแท็บเลเยอร์

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

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