ภาพเคลื่อนไหวต้องทำงานได้ดี มิฉะนั้นจะส่งผลเสียต่อประสบการณ์ของผู้ใช้
รักษา 60fps ทุกครั้งที่คุณเคลื่อนไหว เนื่องจากจะทำให้ภาพกระตุกหรือค้างซึ่งผู้ใช้จะสังเกตเห็นได้น้อยลงและส่งผลเสียต่อประสบการณ์การใช้งาน
- ดูแลว่าภาพเคลื่อนไหวจะไม่ทำให้เกิดปัญหาด้านประสิทธิภาพ ตรวจสอบว่าคุณทราบผลกระทบของการทำให้พร็อพเพอร์ตี้ CSS หนึ่งๆ เคลื่อนไหว
- คุณสมบัติการเคลื่อนไหวที่เปลี่ยนรูปทรงเรขาคณิตของหน้า (เลย์เอาต์) หรือทำให้การวาดภาพมีราคาแพงมาก
- หากทำได้ ให้พยายามเปลี่ยนการแปลงและความทึบแสง
- ใช้
will-changeเพื่อตรวจสอบว่าเบราว์เซอร์รู้สิ่งที่คุณวางแผนจะทำเป็นภาพเคลื่อนไหว
คุณสมบัติการสร้างภาพเคลื่อนไหวไม่ใช่โปรแกรมฟรี และผลิตภัณฑ์บางอย่างสำหรับสร้างภาพเคลื่อนไหวก็มีราคาถูกกว่าคุณสมบัติอื่นๆ เช่น การทำให้ width และ height ขององค์ประกอบเคลื่อนไหวเพื่อเปลี่ยนรูปเรขาคณิตและอาจทำให้องค์ประกอบอื่นๆ ในหน้าเว็บขยับหรือเปลี่ยนขนาด กระบวนการนี้เรียกว่าการออกแบบ (หรือการจัดเรียงใหม่ในเบราว์เซอร์ที่ใช้ Gecko เช่น Firefox) และอาจมีค่าใช้จ่ายสูงหากหน้าเว็บมีองค์ประกอบจำนวนมาก เมื่อใดก็ตามที่มีการทริกเกอร์เลย์เอาต์ โดยปกติจะต้องมีการทาสีหน้าหรือบางส่วนของหน้า ซึ่งมักราคาแพงกว่าการดำเนินการเลย์เอาต์เอง
หากทำได้ คุณควรหลีกเลี่ยงภาพเคลื่อนไหวที่ทำให้คุณสมบัติทริกเกอร์เลย์เอาต์หรือการระบายสี สำหรับเบราว์เซอร์สมัยใหม่ส่วนใหญ่ จะมีการจำกัดภาพเคลื่อนไหวไว้ที่ opacity หรือ transform ซึ่งทั้ง 2 อย่างนี้เบราว์เซอร์สามารถเพิ่มประสิทธิภาพได้อย่างมาก ไม่ว่าภาพเคลื่อนไหวนั้นจะจัดการโดย 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 ลดลง ซึ่งส่งผลให้เกิดความสับสน