เบราว์เซอร์สมัยใหม่สามารถสร้างภาพเคลื่อนไหวให้กับพร็อพเพอร์ตี้ 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 และ Web Animations (ในเบราว์เซอร์ที่รองรับ API) มักจะจัดการในเธรดที่เรียกว่าเธรดคอมโพสิต ซึ่งแตกต่างจากเธรดหลักของเบราว์เซอร์ที่ใช้สำหรับเรียกใช้การจัดสไตล์ เลย์เอาต์ การวาดภาพ และ JavaScript ซึ่งหมายความว่าหากเบราว์เซอร์กำลังทำงานบางอย่างที่ต้องใช้ทรัพยากรมากในเธรดหลัก ภาพเคลื่อนไหวเหล่านี้จะทำงานต่อไปได้โดยไม่หยุดชะงัก
ตามที่อธิบายไว้ในบทความนี้ การเปลี่ยนแปลงอื่นๆ ในการเปลี่ยนรูปแบบและความทึบแสงจะจัดการโดยเธรดคอมโพสิตในหลายกรณีด้วย
หากภาพเคลื่อนไหวใดๆ ทริกเกอร์การวาด เลย์เอาต์ หรือทั้ง 2 อย่าง ระบบจะต้องใช้เธรดหลักในการทำงาน กรณีนี้ใช้ได้กับทั้งภาพเคลื่อนไหว CSS และ JavaScript และค่าใช้จ่ายเพิ่มเติมของเลย์เอาต์หรือการวาดภาพมีแนวโน้มที่จะน้อยกว่างานใดๆ ที่เชื่อมโยงกับการดำเนินการของ CSS หรือ JavaScript จึงทำให้คำถามนี้ไม่มีความหมาย