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