ภาพเคลื่อนไหวบางรายการในหน้าเว็บสามารถจัดการได้อย่างสมบูรณ์ในขั้นตอนคอมโพสิตของไปป์ไลน์การแสดงผล
ภาพเคลื่อนไหวที่ไม่ได้ทำการคอมโพสิทต้องใช้ความพยายามมากขึ้นและอาจกระตุก (ไม่ราบรื่น) ในโทรศัพท์ระดับล่างหรือเมื่อมีการเรียกใช้งานที่ต้องใช้ประสิทธิภาพสูงในเธรดหลัก
ภาพเคลื่อนไหวที่ไม่ได้คอมโพสยังอาจเพิ่มการเปลี่ยนแปลงเลย์เอาต์แบบสะสม (CLS) ของหน้าเว็บด้วย เนื่องจากจะส่งผลให้องค์ประกอบที่อัลกอริทึม CLS วัดได้เคลื่อนไหวจริง ซึ่งอาจทําให้องค์ประกอบอื่นๆ เปลี่ยนแปลงไปด้วย ภาพเคลื่อนไหวแบบคอมโพสิตจะไม่ทําให้องค์ประกอบอื่นๆ เลื่อนไปมา จึงได้รับการยกเว้นจาก CLS การลด CLS จะปรับปรุงคะแนนประสิทธิภาพของ Lighthouse
ข้อมูลเบื้องต้น
อัลกอริทึมของเบราว์เซอร์สำหรับการแปลง HTML, CSS และ JavaScript เป็นพิกเซลเรียกรวมกันว่าไปป์ไลน์การแสดงผล
คุณไม่เข้าใจความหมายของแต่ละขั้นตอนในไปป์ไลน์การแสดงผลก็ไม่เป็นไร สิ่งที่สําคัญที่ควรเข้าใจในตอนนี้ก็คือในแต่ละขั้นตอนของไปป์ไลน์การแสดงผลนั้น เบราว์เซอร์จะใช้ผลลัพธ์ของการดำเนินการก่อนหน้าเพื่อสร้างข้อมูลใหม่ เช่น หากโค้ดทําสิ่งที่ทริกเกอร์เลย์เอาต์ ขั้นตอน Paint และ Composite จะต้องทํางานอีกครั้ง ภาพเคลื่อนไหวที่ไม่ได้คอมโพสคือภาพเคลื่อนไหวที่เรียกใช้ขั้นตอนก่อนหน้าในไปป์ไลน์การแสดงผล (สไตล์ เลย์เอาต์ หรือเพนต์) ภาพเคลื่อนไหวที่ไม่ได้คอมโพสจะมีประสิทธิภาพต่ำกว่าเนื่องจากบังคับให้เบราว์เซอร์ทำงานมากขึ้น
ดูแหล่งข้อมูลต่อไปนี้เพื่อดูรายละเอียดเกี่ยวกับไปป์ไลน์การแสดงผล
- เจาะลึกเว็บเบราว์เซอร์สมัยใหม่ (ตอนที่ 3)
- ลดความซับซ้อนของการทาสีและลดพื้นที่การทาสี
- ใช้เฉพาะพร็อพเพอร์ตี้สำหรับคอมโพสิตและจัดการจำนวนเลเยอร์
วิธีที่ Lighthouse ตรวจหาภาพเคลื่อนไหวที่ไม่ได้คอมโพส
เมื่อคอมโพสิตภาพเคลื่อนไหวไม่ได้ Chrome จะรายงานสาเหตุที่ดำเนินการไม่สำเร็จไปยังการติดตามของ DevTools ซึ่งเป็นข้อมูลเดียวกับที่ Lighthouse อ่าน Lighthouse จะแสดงรายการโหนด DOM ที่มีภาพเคลื่อนไหวที่คอมโพสไม่ได้ พร้อมทั้งสาเหตุของการไม่สําเร็จสําหรับภาพเคลื่อนไหวแต่ละรายการ
วิธีตรวจสอบว่าภาพเคลื่อนไหวได้รับการคอมโพส
โปรดดูใช้เฉพาะพร็อพเพอร์ตี้คอมโพสิเตอร์และจัดการจำนวนเลเยอร์ และภาพเคลื่อนไหวที่มีประสิทธิภาพสูง