การประกอบภาพคือการนำส่วนต่างๆ ของหน้าเว็บมารวมไว้ด้วยกันเพื่อแสดงบนหน้าจอ
การจัดองค์ประกอบคือการนำส่วนต่างๆ ของหน้าเว็บมารวมไว้ด้วยกันเพื่อแสดงบนหน้าจอ
มีปัจจัยหลัก 2 ประการในด้านนี้ที่ส่งผลต่อประสิทธิภาพของหน้าเว็บ ได้แก่ จำนวนเลเยอร์องค์ประกอบที่จำเป็นต้องจัดการ และคุณสมบัติที่คุณใช้สำหรับภาพเคลื่อนไหว
สรุป
- พยายามทำตามการเปลี่ยนแปลงการเปลี่ยนรูปแบบและความทึบแสงของภาพเคลื่อนไหว
- โปรโมตการย้ายองค์ประกอบด้วย
will-change
หรือtranslateZ
- หลีกเลี่ยงการใช้กฎการโปรโมตมากเกินไป เลเยอร์ต้องใช้หน่วยความจำและการจัดการ
ใช้การเปลี่ยนแปลงการเปลี่ยนรูปแบบและความทึบแสงสำหรับภาพเคลื่อนไหว
ไปป์ไลน์พิกเซลเวอร์ชันที่มีประสิทธิภาพที่สุดจะหลีกเลี่ยงทั้งเลย์เอาต์และสี และต้องใช้การเปลี่ยนแปลงคอมโพเนนต์เท่านั้น ดังนี้
![ไปป์ไลน์พิกเซลที่ไม่มีเลย์เอาต์หรือสี](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-pixel-pipeline-no-la-96825803c8cec.jpg?authuser=5&hl=th)
ในการจะบรรลุเป้าหมายนี้ คุณต้องยึดคุณสมบัติการเปลี่ยนแปลงที่ตัวคอมโพสิเตอร์เพียงอย่างเดียวสามารถจัดการได้ ปัจจุบันมีเพียง 2 พร็อพเพอร์ตี้เท่านั้นที่เป็นความจริง นั่นคือ transform
และ opacity
:
![คุณสมบัติที่คุณทําให้เคลื่อนไหวได้โดยไม่ต้องเรียกใช้เลย์เอาต์หรือ Paint](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-properties-can-anima-100ed2c7d26a4.jpg?authuser=5&hl=th)
คำเตือนสำหรับการใช้ transform
และ opacity
คือองค์ประกอบที่คุณเปลี่ยนคุณสมบัติเหล่านี้ควรอยู่ในเลเยอร์ตัวประกอบเอง ในการสร้างเลเยอร์ คุณต้องโปรโมตองค์ประกอบซึ่งเราจะพูดถึงถัดไป
โปรโมตองค์ประกอบที่คุณวางแผนจะทำเป็นภาพเคลื่อนไหว
ดังที่เราได้กล่าวไว้ในส่วน "ลดความซับซ้อนของสีและลดพื้นที่ที่ลงสี" คุณควรโปรโมตองค์ประกอบที่คุณวางแผนจะทำภาพเคลื่อนไหว (อย่าให้มากเกินไปจนเกินไป) ไปยังเลเยอร์ขององค์ประกอบนั้นๆ ดังนี้
.moving-element {
will-change: transform;
}
หรือสำหรับเบราว์เซอร์รุ่นเก่าหรือเบราว์เซอร์ที่ไม่รองรับจะไม่มีการเปลี่ยนแปลง ดังนี้
.moving-element {
transform: translateZ(0);
}
จัดการเลเยอร์และหลีกเลี่ยงการระเบิดของเลเยอร์
บางทีคุณอาจจะอยากทราบว่าเลเยอร์มักจะช่วยเพิ่มประสิทธิภาพได้ เพื่อโปรโมตองค์ประกอบทั้งหมดในหน้าเว็บด้วยสิ่งต่อไปนี้
* {
will-change: transform;
transform: translateZ(0);
}
ซึ่งเป็นวิธีบอกว่าคุณต้องการโปรโมตทุกๆ องค์ประกอบบนหน้าเว็บ ปัญหาก็คือ ทุกเลเยอร์ที่คุณสร้างต้องใช้หน่วยความจำและการจัดการ ซึ่งทำงานได้ไม่เสียค่าใช้จ่าย อันที่จริง บนอุปกรณ์ที่มีหน่วยความจำจำกัด ผลกระทบต่อประสิทธิภาพอาจเยอะกว่าการสร้างเลเยอร์อย่างมาก ทุกพื้นผิวของเลเยอร์ต้องอัปโหลดไปยัง GPU เพื่อให้มีข้อจำกัดเพิ่มเติมในแง่ของแบนด์วิดท์ระหว่าง CPU และ GPU รวมถึงหน่วยความจำที่ใช้ได้สำหรับพื้นผิวใน GPU
ใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อทำความเข้าใจเลเยอร์ต่างๆ ในแอป
![ปุ่มเปิด/ปิดสำหรับเครื่องมือสร้างโปรไฟล์สีในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-toggle-the-paint-pro-0bfd1048bb7de.jpg?authuser=5&hl=th)
หากต้องการทำความเข้าใจเกี่ยวกับเลเยอร์ในแอปพลิเคชันของคุณ และเหตุผลที่องค์ประกอบมีเลเยอร์ คุณต้องเปิดใช้เครื่องมือสร้างโปรไฟล์ Paint ในไทม์ไลน์ของ Chrome DevTools โดยทำดังนี้
เมื่อเปิดโหมดนี้ คุณควรทำการบันทึกเสียง เมื่อบันทึกเสร็จแล้ว คุณจะคลิกแต่ละเฟรมได้ ซึ่งจะอยู่ระหว่างแถบเฟรมต่อวินาทีและรายละเอียด
![เฟรมที่นักพัฒนาซอฟต์แวร์สนใจทำโปรไฟล์](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/a-frame-developer-is-int-195784f471018.jpg?authuser=5&hl=th)
เมื่อคลิกตัวเลือกนี้ จะมีตัวเลือกใหม่ให้คุณในรายละเอียด นั่นคือแท็บเลเยอร์
![ปุ่มแท็บเลเยอร์ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-layer-tab-button-chr-b74ebc86acad5.jpg?authuser=5&hl=th)
ตัวเลือกนี้จะแสดงมุมมองใหม่ที่ช่วยให้คุณสามารถเลื่อน สแกน และซูมเข้าเลเยอร์ทั้งหมดในเฟรมนั้น พร้อมกับเหตุผลที่สร้างเลเยอร์แต่ละเลเยอร์ขึ้น
![มุมมองเลเยอร์ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-layer-view-chrome-de-04740f747ced7.jpg?authuser=5&hl=th)
เมื่อใช้มุมมองนี้ คุณจะสามารถติดตามจำนวนเลเยอร์ที่คุณมี หากใช้เวลานานในการประสานระหว่างการดำเนินการที่ต้องการประสิทธิภาพ เช่น การเลื่อนหรือการเปลี่ยน (คุณควรกำหนดไว้ประมาณ 4-5 มิลลิวินาที) คุณสามารถใช้ข้อมูลที่นี่เพื่อดูจำนวนเลเยอร์ สาเหตุที่สร้าง และจัดการจำนวนเลเยอร์ในแอปได้จากส่วนนี้