ภาพเคลื่อนไหวและประสิทธิภาพ

ภาพเคลื่อนไหวต้องมีประสิทธิภาพ มิเช่นนั้นอาจส่งผลเสียต่อประสบการณ์ของผู้ใช้

Paul Lewis

Sam Thorogood

รักษาระดับ 60 fps ทุกครั้งที่คุณสร้างภาพเคลื่อนไหว เนื่องจากเฟรมเรตที่ต่ำกว่าจะทำให้ภาพกระตุกหรือหยุดชะงัก ซึ่งผู้ใช้จะสังเกตเห็นได้และส่งผลเสียต่อประสบการณ์การใช้งาน

• ตรวจสอบว่าภาพเคลื่อนไหวไม่ก่อให้เกิดปัญหาด้านประสิทธิภาพ และคุณทราบผลกระทบของการใช้ภาพเคลื่อนไหวกับคุณสมบัติ CSS หนึ่งๆ
• การแสดงภาพเคลื่อนไหวของพร็อพเพอร์ตี้ที่เปลี่ยนเรขาคณิตของหน้า (เลย์เอาต์) หรือทำให้เกิดการวาดภาพจะกินทรัพยากรมากเป็นพิเศษ
• โปรดใช้การเปลี่ยนรูปแบบและความทึบแสงเมื่อเป็นไปได้
• ใช้ will-change เพื่อให้เบราว์เซอร์ทราบว่าคุณวางแผนที่จะสร้างภาพเคลื่อนไหวอะไร

การสร้างภาพเคลื่อนไหวของพร็อพเพอร์ตี้นั้นไม่ใช่บริการฟรี และบางพร็อพเพอร์ตี้ก็สร้างภาพเคลื่อนไหวได้ในราคาที่ถูกกว่าพร็อพเพอร์ตี้อื่นๆ ตัวอย่างเช่น การทำ width และ height ขององค์ประกอบให้เคลื่อนไหวจะเปลี่ยนเรขาคณิตขององค์ประกอบและอาจทำให้องค์ประกอบอื่นๆ ในหน้าเว็บเคลื่อนไหวหรือเปลี่ยนขนาด กระบวนการนี้เรียกว่าเลย์เอาต์ (หรือการจัดเรียงใหม่ในเบราว์เซอร์ที่ใช้ Gecko เช่น Firefox) และอาจใช้เวลานานหากหน้าเว็บมีองค์ประกอบจำนวนมาก เมื่อใดก็ตามที่ทริกเกอร์เลย์เอาต์ โดยทั่วไปแล้วระบบจะต้องวาดหน้าเว็บหรือบางส่วนของหน้าเว็บ ซึ่งมักจะมีค่าใช้จ่ายมากกว่าการดำเนินการกับเลย์เอาต์เอง

คุณควรหลีกเลี่ยงการใช้ภาพเคลื่อนไหวกับพร็อพเพอร์ตี้ที่ทริกเกอร์เลย์เอาต์หรือการวาดภาพ สําหรับเบราว์เซอร์สมัยใหม่ส่วนใหญ่ การดำเนินการนี้หมายถึงการจํากัดภาพเคลื่อนไหวเป็น opacity หรือ transform ซึ่งเบราว์เซอร์จะเพิ่มประสิทธิภาพได้สูง ไม่ว่าภาพเคลื่อนไหวจะจัดการโดย JavaScript หรือ CSS ก็ตาม

อ่านคู่มือฉบับเต็มเกี่ยวกับการสร้างภาพเคลื่อนไหวที่มีประสิทธิภาพสูง

การใช้พร็อพเพอร์ตี้ will-change

การรองรับเบราว์เซอร์

• 36
• 79
• 36
• 9.1

แหล่งที่มา

ใช้ will-change เพื่อให้เบราว์เซอร์ทราบว่าคุณต้องการเปลี่ยนพร็อพเพอร์ตี้ขององค์ประกอบ วิธีนี้ช่วยให้เบราว์เซอร์ใช้การเพิ่มประสิทธิภาพที่เหมาะสมที่สุดได้ก่อนที่คุณจะทําการเปลี่ยนแปลง อย่างไรก็ตาม อย่าใช้ will-change มากเกินไป เนื่องจากอาจทำให้เบราว์เซอร์สิ้นเปลืองทรัพยากร ซึ่งจะทำให้เกิดปัญหาด้านประสิทธิภาพมากขึ้น

หลักการทั่วไปคือ หากภาพเคลื่อนไหวอาจทริกเกอร์ในอีก 200 มิลลิวินาทีข้างหน้า ไม่ว่าจะเกิดจากการโต้ตอบของผู้ใช้หรือสถานะของแอปพลิเคชัน คุณควรตั้งค่า will-change ในองค์ประกอบภาพเคลื่อนไหว ในกรณีส่วนใหญ่ องค์ประกอบในมุมมองปัจจุบันของแอปที่คุณตั้งใจจะให้เคลื่อนไหวควรเปิดใช้ will-change สำหรับพร็อพเพอร์ตี้ที่คุณวางแผนจะเปลี่ยนแปลง ในกรณีของตัวอย่างกล่องที่เราใช้ตลอดคู่มือก่อนหน้านี้ การเพิ่ม will-change สำหรับการเปลี่ยนรูปแบบและความทึบจะมีลักษณะดังนี้

.box {
  will-change: transform, opacity;
}

ตอนนี้เบราว์เซอร์ที่รองรับ ซึ่งก็คือเบราว์เซอร์สมัยใหม่ส่วนใหญ่ในปัจจุบัน จะเพิ่มประสิทธิภาพที่เหมาะสมเบื้องหลังเพื่อรองรับการเปลี่ยนแปลงหรือภาพเคลื่อนไหวของพร็อพเพอร์ตี้เหล่านั้น

ประสิทธิภาพของ CSS เทียบกับ JavaScript

หน้าเว็บและชุดข้อความความคิดเห็นจำนวนมากในอินเทอร์เน็ตพูดถึงข้อดีของภาพเคลื่อนไหว CSS และ JavaScript จากมุมมองด้านประสิทธิภาพ สิ่งที่ควรทราบมีดังนี้

• ภาพเคลื่อนไหวที่อิงตาม CSS และภาพเคลื่อนไหวบนเว็บที่รองรับโดยกำเนิดมักจะจัดการในเธรดที่เรียกว่า "เธรดคอมโพสิต" ซึ่งแตกต่างจาก "เธรดหลัก" ของเบราว์เซอร์ที่ใช้สำหรับแสดงสไตล์ เลย์เอาต์ การวาดภาพ และ JavaScript ซึ่งหมายความว่าหากเบราว์เซอร์กำลังทำงานบางอย่างที่ต้องใช้ทรัพยากรมากในเธรดหลัก ภาพเคลื่อนไหวเหล่านี้จะทำงานต่อไปได้โดยไม่หยุดชะงัก

• ในหลายกรณี การเปลี่ยนแปลงอื่นๆ เกี่ยวกับการเปลี่ยนรูปแบบและความทึบแสงจะจัดการโดยเธรดคอมโพสิตด้วย

• หากภาพเคลื่อนไหวทริกเกอร์การวาด เลย์เอาต์ หรือทั้ง 2 อย่าง "เธรดหลัก" จะต้องทํางาน กรณีนี้ใช้ได้กับทั้งภาพเคลื่อนไหวที่ใช้ CSS และ JavaScript และค่าใช้จ่ายเพิ่มเติมของเลย์เอาต์หรือการวาดภาพมีแนวโน้มที่จะน้อยกว่างานใดๆ ที่เชื่อมโยงกับการดำเนินการของ CSS หรือ JavaScript ซึ่งทำให้คำถามนี้ไม่มีความหมาย