สรุป: Chromium กำลังอัปเดตความสามารถในการเร่งฮาร์ดแวร์โดยอัตโนมัติสำหรับภาพเคลื่อนไหว SVG, การเปลี่ยนรูปแบบตามเปอร์เซ็นต์ และจะมีภาพเคลื่อนไหวที่เป็นสีพื้นหลังและเส้นทางคลิปในเร็วๆ นี้
เมื่อพูดถึงประสิทธิภาพของภาพเคลื่อนไหวบนเว็บ การใช้ภาพเคลื่อนไหวแบบ "เร่งฮาร์ดแวร์" และ "GPU แบบเร่ง" มักจะเกิดขึ้น แต่สิ่งเหล่านี้หมายความว่าอย่างไร รูปแบบที่มีการเร่งฮาร์ดแวร์คือรูปแบบที่ใช้ประโยชน์จาก GPU (หน่วยประมวลผลกราฟิก) แทนที่จะเป็น CPU (หน่วยประมวลผลกลาง) ในการแสดงผลรูปแบบภาพ เนื่องจาก GPU แสดงผลการเปลี่ยนแปลงภาพบนหน้าเว็บได้เร็วกว่า CPU
การใช้ GPU เพื่อลดการเปลี่ยนภาพและภาพเคลื่อนไหวที่ใช้กราฟิกมากจะทำให้ภาพลื่นไหลขึ้นและลดการกระตุกน้อยลง เนื่องจากภาพเคลื่อนไหวเหล่านี้ไม่ได้รับผลกระทบจากเทรดหลัก การดึงให้ออกจากเธรดหลักจะทำให้ภาพเคลื่อนไหวข้ามเปลือกของสคริปต์อื่นๆ ที่ทำงานอยู่ในหน้าเว็บ ทำให้ภาพช้าลงและสร้างการกระตุก
การเปิดใช้งานภาพเคลื่อนไหวที่เร่งการแสดงผลด้วยฮาร์ดแวร์
ภาพเคลื่อนไหวที่เร่งการแสดงผลด้วยฮาร์ดแวร์จะประกอบขึ้นเป็นเลเยอร์และช่วยให้นักพัฒนาซอฟต์แวร์สร้างภาพเคลื่อนไหว 60 FPS (เฟรมต่อวินาที) ที่เรียบเนียนเพื่อปรับปรุงประสิทธิภาพการแสดงผลภาพ ปัจจุบันคุณระบุและเปิดใช้ภาพเคลื่อนไหวและการเปลี่ยนแบบเร่งฮาร์ดแวร์บนเว็บได้ด้วยวิธีต่อไปนี้
- ใช้ฟังก์ชัน CSS
transformหรือเปลี่ยนค่าopacityหรือfilter - เพิ่มพร็อพเพอร์ตี้
will-changeลงในองค์ประกอบ - สร้างภาพวาดแคนวาสแบบเคลื่อนไหวผ่าน
OffscreenCanvas - สร้างภาพวาด 3 มิติของ WebGL
opacity, filter และ transform เท่านั้นในขณะนี้ background-color และ clip-path จะเข้าร่วมรายการนี้ได้ในเร็วๆ นี้ มีอะไรอีกบ้างที่เปลี่ยนเป็นการเร่งฮาร์ดแวร์โดยค่าเริ่มต้นใน Chromium มีบางอย่างที่กำลังจะพัฒนาในอนาคต รวมถึงภาพเคลื่อนไหว SVG ซึ่งเป็นสิ่งที่นักพัฒนาซอฟต์แวร์ร้องขออย่างมาก
ภาพเคลื่อนไหว SVG ที่มีการเร่งฮาร์ดแวร์
SVG เป็นส่วนเติมเต็มที่ดีให้แก่ทุกเว็บไซต์ และตอนนี้การโต้ตอบกับ SVG เหล่านั้นจะมีประสิทธิภาพมากขึ้น ตั้งแต่ Chromium 89 เป็นต้นไป Chrome จะรวมการใช้งานต่างๆ กับ Firefox เพื่อเปิดใช้การเร่งฮาร์ดแวร์โดยค่าเริ่มต้นสำหรับภาพเคลื่อนไหว SVG คุณซึ่งเป็นนักพัฒนาแอปต้องทำอะไรบ้าง ไม่มี การตั้งค่านี้จะถูกนำมาใช้โดยอัตโนมัติ สำหรับภาพเคลื่อนไหว SVG ใน Chromium 89 ขึ้นไป
ตัวอย่าง
มาดูความแตกต่างระหว่างภาพเคลื่อนไหว SVG ทั้งที่เปิดและไม่เปิดการเร่งฮาร์ดแวร์กัน สัญญาณบอกสถานะการโหลดเป็นองค์ประกอบ UI ที่ใช้กันโดยทั่วไปดังเช่นที่เห็นใน facebook.com สัญญาณบอกสถานะเหล่านี้กำลังบอกการทำงานในเซิร์ฟเวอร์ขณะที่ผู้ใช้กำลังรอการตอบกลับ ในกรณีที่แสดงไว้ที่นี่ การตอบกลับจะเป็นการโหลดผลลัพธ์เพิ่มเติมในแถบด้านข้าง
เมื่อเราเปิดเครื่องมือสำหรับนักพัฒนาเว็บขึ้นมา เราสามารถเริ่มสร้างโปรไฟล์และเห็นความแตกต่างระหว่างประสบการณ์ภาพเคลื่อนไหวที่ใช้ CPU และภาพเคลื่อนไหวแบบเร่ง GPU
ทางด้านซ้าย (Chromium 87) จะมีสีใหม่ทุกครั้งที่ไอคอนหมุนเคลื่อนไหว (แบบต่อเนื่อง) ส่วนทางด้านขวาไม่มีการทาสีใหม่ (Chromium 89 และ Firefox) ซึ่งเราสามารถทดสอบได้ในแผงการแสดงผลของเครื่องมือสำหรับนักพัฒนาเว็บ เมื่อเปิดการกะพริบในการแสดงผล
เมื่อพิจารณาแผงประสิทธิภาพอย่างละเอียด คุณจะเห็นผลกระทบนี้อีกครั้ง และผลกระทบที่มีต่อประสิทธิภาพโดยรวมของผลิตภัณฑ์และบริการบนอินเทอร์เน็ต คุณจึงหลีกเลี่ยงการแสดงผลและเวลาในการวาดภาพโดยสิ้นเชิงสำหรับภาพเคลื่อนไหว ซึ่งหมายความถึงภาพเคลื่อนไหวที่ราบรื่นยิ่งขึ้นและแอปพลิเคชันที่มีประสิทธิภาพมากกว่า แม้ว่า Facebook จะไม่จัดส่งตัวโหลดที่ใช้ SVG นี้จนกว่าเบราว์เซอร์จะรองรับ SVG แบบเร่งฮาร์ดแวร์มากกว่า แต่ก็จะช่วยให้มีความยืดหยุ่นมากขึ้นในแง่ของข้อกำหนดด้านการกำหนดธีม การปรับขนาด และความละเอียด รวมถึงการดูแลรักษาที่ง่ายขึ้น
ภาพเคลื่อนไหวแบบเป็นเปอร์เซ็นต์
ทีมการโต้ตอบยังสนับสนุนการจัดส่งภาพเคลื่อนไหวในการแปลงเปอร์เซ็นต์ใน Chromium 89 ด้วย ภาพเคลื่อนไหวแบบเปอร์เซ็นต์อธิบายการโต้ตอบที่มีการเคลื่อนไหวแบบเปอร์เซ็นต์ เช่น คุณอาจปรับขนาดบางอย่างขึ้น 20% หรือเลื่อนเมนูแถบด้านข้างที่ปรับเปลี่ยนตามอุปกรณ์ออกจากหน้าจอโดยใช้ข้อความอย่าง translateX: -100%
ภาพเคลื่อนไหวของ UI ประเภทนี้ค่อนข้างพบได้ทั่วไป แต่ขณะนี้ยังไม่ใช้ประโยชน์จากการเร่งฮาร์ดแวร์เนื่องจากก่อนหน้านี้เราไม่สามารถรวมภาพเคลื่อนไหวดังกล่าวเข้าด้วยกันได้ เปอร์เซ็นต์ในการแปลงขึ้นอยู่กับขนาดของกล่อง (กล่าวคือ เลย์เอาต์) แต่ตอนนี้ตราบใดที่ขนาดเลย์เอาต์ไม่เปลี่ยนแปลงทุกเฟรม เบราว์เซอร์สามารถคำนวณค่าการแปลงแบบสัมบูรณ์ล่วงหน้าและเรียกใช้ได้เสมือนว่านักพัฒนาซอฟต์แวร์ได้ให้ค่าพิกเซลไว้ ข่าวดีก็คือทีม Chromium กำลังพัฒนาฟีเจอร์นี้และในไม่ช้า ภาพเคลื่อนไหวประเภทนี้จะได้รับการผสมและเร่งฮาร์ดแวร์โดยอัตโนมัติ
สิ่งที่จะเกิดขึ้นต่อไป
ภาพเคลื่อนไหวที่อัปเดตใหม่นี้จะทำให้การจัดรูปแบบเว็บราบรื่นขึ้นมาก ดังที่กล่าวไปแล้ว ทีมงานต้องการอยู่เสมอว่า
จะเกิดอะไรกับเว็บใหม่ๆ ที่กำลังจะเกิดขึ้น ตอนนี้เรามีแผนที่จะแปลง background-color และ clip-path ให้ใช้การเร่งฮาร์ดแวร์โดยอัตโนมัติใน Chromium เวอร์ชันต่อๆ ไป
background-color มีความสำคัญเนื่องจากมีจำนวนการใช้งานสำหรับการเปลี่ยนและเอฟเฟกต์สูง และ clip-path ทำให้เอฟเฟกต์การเปลี่ยนมีประสิทธิภาพมากยิ่งขึ้นทั่วทั้งอินเทอร์เน็ต เมื่อประสิทธิภาพมาบรรจบกับการโต้ตอบ
ทุกคนก็จะได้ประโยชน์!
ภาพหน้าปก: Sioraphotography สำหรับ Unsplash