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

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

Paul Lewis

Sam Thorogood

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

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

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

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

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

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

ใช้ 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 ซึ่งทำให้คำถามนี้ไม่มีความหมาย