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