เบราว์เซอร์ที่ทันสมัยสามารถทำให้พร็อพเพอร์ตี้ CSS 2 รายการเคลื่อนไหวได้ในราคาถูก: transform และ opacity
ถ้าคุณสร้างภาพเคลื่อนไหวกับสิ่งอื่น
ก็มีโอกาสที่จะไม่ได้ภาพ 60 เฟรมต่อวินาที (FPS) ที่แนบเนียน
โพสต์นี้จะอธิบายเหตุผลของคุณ
ประสิทธิภาพของภาพเคลื่อนไหวและอัตราเฟรม
เป็นที่ยอมรับกันอย่างกว้างขวางว่าอัตราเฟรม 60 FPS คือเป้าหมายเมื่อสร้างภาพเคลื่อนไหวให้กับสิ่งต่างๆ ในเว็บ อัตราเฟรมนี้จะทำให้ภาพเคลื่อนไหวของคุณดูราบรื่น เฟรมบนเว็บคือเวลาที่ใช้ทำงานทั้งหมดที่จำเป็นในการอัปเดตและทาสีหน้าจอใหม่ หากแต่ละเฟรมไม่เสร็จสมบูรณ์ภายใน 16.7 มิลลิวินาที (1,000 / 60 ≈ 16.7) ผู้ใช้ก็จะรับรู้ถึงความล่าช้า
ไปป์ไลน์การแสดงภาพ
หากต้องการแสดงบางสิ่งในหน้าเว็บ เบราว์เซอร์ต้องทำตามขั้นตอนต่อไปนี้ตามลำดับ
- รูปแบบ: คำนวณรูปแบบที่ใช้กับองค์ประกอบ
- เลย์เอาต์: สร้างเรขาคณิตและตำแหน่งสำหรับแต่ละองค์ประกอบ
- สี: เติมพิกเซลของแต่ละองค์ประกอบลงในเลเยอร์
- วัสดุผสม: วาดเลเยอร์ลงในหน้าจอ
ทั้ง 4 ขั้นตอนนี้เรียกว่าไปป์ไลน์การแสดงผลของเบราว์เซอร์
เมื่อคุณทำให้บางสิ่งเคลื่อนไหวในหน้าที่โหลดไปแล้ว ขั้นตอนเหล่านี้จะต้องเกิดขึ้นอีกครั้ง ขั้นตอนนี้เริ่มต้นจากขั้นตอนที่ต้องเปลี่ยนแปลงเพื่ออนุญาตให้ภาพเคลื่อนไหวเกิดขึ้นได้
ดังที่ได้กล่าวไว้ก่อนหน้านี้ ขั้นตอนเหล่านี้เป็นตามลำดับ เช่น ถ้าคุณทำให้บางอย่างเคลื่อนไหวด้วยการเปลี่ยนเลย์เอาต์ ขั้นตอนสีและขั้นตอนการผสมจะต้องเรียกใช้อีกครั้งด้วย ดังนั้น การสร้างภาพเคลื่อนไหวที่มีการเปลี่ยนแปลงเลย์เอาต์ จึงมีค่าใช้จ่ายสูงกว่าการสร้างภาพเคลื่อนไหวสิ่งที่เปลี่ยนเฉพาะการจัดวางองค์ประกอบ
การสร้างภาพเคลื่อนไหวของคุณสมบัติการออกแบบ
การเปลี่ยนแปลงเลย์เอาต์เกี่ยวข้องกับการคำนวณเรขาคณิต (ตำแหน่งและขนาด) ขององค์ประกอบทั้งหมดที่ได้รับผลกระทบจากการเปลี่ยนแปลง
หากเปลี่ยนองค์ประกอบหนึ่ง อาจมีการคำนวณเรขาคณิตขององค์ประกอบอื่นๆ ใหม่
เช่น หากคุณเปลี่ยนความกว้างขององค์ประกอบ <html> องค์ประกอบย่อยต่างๆ ขององค์ประกอบนั้นอาจได้รับผลกระทบ
เนื่องจากองค์ประกอบล้นและส่งผลกระทบต่อกันและกัน การเปลี่ยนแปลงที่ลึกลงไปในผังอาจส่งผลให้เกิดการคำนวณเลย์เอาต์ย้อนกลับไปจนถึงระดับบนสุดได้
ยิ่งโครงสร้างขององค์ประกอบที่มองเห็นได้มีขนาดใหญ่ขึ้น ก็ยิ่งใช้เวลาคำนวณเลย์เอาต์นานขึ้นเท่านั้น
การสร้างภาพเคลื่อนไหวของคุณสมบัติของสี
Paint คือขั้นตอนการกำหนดว่าควรทาสีองค์ประกอบใดลงในหน้าจอ ซึ่งมักจะเป็นการทำงานที่ยาวนานที่สุดในไปป์ไลน์
การลงสีส่วนใหญ่ในเบราว์เซอร์สมัยใหม่จะทำในโปรแกรมแรสเตอร์ซอฟต์แวร์ คุณอาจต้องระบายสีองค์ประกอบอื่นๆ นอกเหนือจากองค์ประกอบที่มีการเปลี่ยนแปลงด้วย ทั้งนี้ขึ้นอยู่กับวิธีจัดกลุ่มองค์ประกอบในแอปเป็นเลเยอร์
การทำให้คุณสมบัติผสมเคลื่อนไหว
การประกอบรูปภาพคือกระบวนการแบ่งหน้าออกเป็นเลเยอร์ แปลงข้อมูลว่าหน้าควรมีลักษณะอย่างไรให้เป็นพิกเซล (การแรสเตอร์) และการนำเลเยอร์มารวมกันเพื่อสร้างหน้า (การประกอบรูปภาพ)
นี่คือสาเหตุที่พร็อพเพอร์ตี้ opacity รวมอยู่ในรายการที่ราคาถูกในการสร้างภาพเคลื่อนไหว
ตราบใดที่พร็อพเพอร์ตี้นี้อยู่ในเลเยอร์ของตัวเอง GPU จะจัดการการเปลี่ยนแปลงระหว่างขั้นตอนการประกอบรูปภาพได้
เบราว์เซอร์แบบ Chromium และ WebKit จะสร้างเลเยอร์ใหม่สำหรับองค์ประกอบที่มีการเปลี่ยนหรือภาพเคลื่อนไหวของ CSS ใน opacity
เลเยอร์คืออะไร
การวางสิ่งที่จะเคลื่อนไหวหรือถูกเปลี่ยนผ่านไปยังเลเยอร์ใหม่ ทำให้เบราว์เซอร์ต้องทำการทาสีรายการเหล่านั้นใหม่ แต่ไม่แทนที่ทุกอย่างที่เหลือ คุณอาจคุ้นเคยกับแนวคิดของ Photoshop เกี่ยวกับเลเยอร์ซึ่งประกอบด้วยองค์ประกอบต่างๆ ที่สามารถย้ายมาไว้ด้วยกันได้ เลเยอร์การแสดงผลของเบราว์เซอร์คล้ายคลึงกับแนวคิดนั้น
แม้ว่าเบราว์เซอร์จะทำหน้าที่ในการตัดสินใจเกี่ยวกับองค์ประกอบที่ควรอยู่ในเลเยอร์ใหม่ได้ดีแล้ว หากเบราว์เซอร์ขาดองค์ประกอบใดไป ก็ยังมีวิธีที่จะบังคับให้สร้างเลเยอร์ได้ คุณดูเรื่องนี้ได้ในวิธีสร้างภาพเคลื่อนไหวประสิทธิภาพสูง อย่างไรก็ตาม การสร้างเลเยอร์ใหม่ควรดำเนินการด้วยความระมัดระวัง เนื่องจากแต่ละเลเยอร์จะใช้หน่วยความจำ บนอุปกรณ์ที่มีหน่วยความจำจำกัด การสร้างเลเยอร์ใหม่อาจทำให้เกิดปัญหาด้านประสิทธิภาพมากกว่าปัญหาที่คุณพยายามแก้ไข นอกจากนี้ พื้นผิวของแต่ละเลเยอร์จะต้องอัปโหลดไปยัง GPU ดังนั้นคุณอาจถึงขีดจำกัดของแบนด์วิดท์ระหว่าง CPU และ GPU
ประสิทธิภาพของ CSS เทียบกับ JavaScript
คุณอาจสงสัยว่า ในมุมมองด้านประสิทธิภาพดีกว่าหรือไม่ การใช้ CSS หรือ JavaScript สำหรับภาพเคลื่อนไหว
โดยทั่วไปภาพเคลื่อนไหวที่ใช้ CSS และภาพเคลื่อนไหวในเว็บ (ในเบราว์เซอร์ที่รองรับ API) จะได้รับการจัดการในชุดข้อความที่เรียกว่าชุดข้อความคอมโพสิเตอร์ ซึ่งแตกต่างจากเทรดหลักของเบราว์เซอร์ที่จะดำเนินการจัดรูปแบบ เลย์เอาต์ วาดเขียน และ JavaScript ซึ่งหมายความว่าหากเบราว์เซอร์ทำงานที่มีค่าใช้จ่ายสูงในเทรดหลัก ภาพเคลื่อนไหวเหล่านี้จะยังทำงานต่อไปโดยไม่หยุดชะงัก
ดังที่อธิบายในบทความนี้ ในหลายๆ กรณี การเปลี่ยนแปลงอื่นๆ เกี่ยวกับการแปลงและความทึบแสงจะจัดการโดยชุดข้อความของตัวจัดวางองค์ประกอบเช่นกัน
หากมีภาพเคลื่อนไหวที่ทำให้เกิดการระบายสี เลย์เอาต์ หรือทั้ง 2 อย่าง ก็จะต้องมีเทรดหลักในการทำงาน การทำงานในลักษณะนี้เหมือนกันสำหรับทั้งภาพเคลื่อนไหวของ CSS และ JavaScript และโอเวอร์เฮดของเลย์เอาต์หรือ Paint มักจะทำให้งานใดๆ ที่เกี่ยวข้องกับการเรียกใช้ CSS หรือ JavaScript แสดงน้อยลง