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