สรุป: Chromium กำลังอัปเดตความสามารถในการเร่งฮาร์ดแวร์โดยอัตโนมัติ สำหรับภาพเคลื่อนไหว SVG การเปลี่ยนรูปแบบตามเปอร์เซ็นต์ และภาพเคลื่อนไหวสีพื้นหลังและเส้นทางของคลิปที่จะมีให้บริการในเร็วๆ นี้
เมื่อพูดถึงประสิทธิภาพของแอนิเมชันบนเว็บ คำว่า "ฮาร์ดแวร์เร่งการแสดงผล" และ "เร่ง GPU" จะเป็นที่นิยมมากขึ้น แต่สิ่งเหล่านี้หมายความว่าอะไร สไตล์ที่ใช้การเร่งฮาร์ดแวร์คือสไตล์ที่ใช้ประโยชน์จาก GPU (หน่วยประมวลผลกราฟิก) แทนที่จะใช้ CPU (หน่วยประมวลผลกลาง) ในการแสดงภาพสไตล์ เนื่องจาก GPU แสดงผลการเปลี่ยนแปลงภาพบนหน้าเว็บได้เร็วกว่า CPU
การใช้ GPU เพื่อลดการเปลี่ยนภาพและภาพเคลื่อนไหวที่เน้นกราฟิกมากเกินไปจะทำให้ภาพราบรื่นขึ้นและลดความยุ่งยาก เนื่องจากภาพเคลื่อนไหวเหล่านี้ไม่ได้รับผลกระทบจากเทรดหลัก เมื่อดึงออกจากเทรดหลัก ภาพเคลื่อนไหวของคุณจะข้ามส่วนสคริปต์อื่นๆ ที่มีการใช้งานอยู่ที่กำลังทำงานอยู่ในหน้า ซึ่งจะทำให้ภาพช้าลงและน่าประทับใจ
การเปิดใช้ภาพเคลื่อนไหวที่มีการเร่งฮาร์ดแวร์
ภาพเคลื่อนไหวแบบเร่งฮาร์ดแวร์จะมีการประกอบขึ้นเป็นเลเยอร์และช่วยให้นักพัฒนาซอฟต์แวร์สร้างภาพเคลื่อนไหวที่ลื่นไหล 60 FPS (เฟรมต่อวินาที) เพื่อปรับปรุงประสิทธิภาพการแสดงภาพ การระบุและเปิดใช้ภาพเคลื่อนไหวและการเปลี่ยนที่มีการเร่งฮาร์ดแวร์ในเว็บมีอยู่ด้วยกัน 2-3 วิธี ดังนี้
- ใช้ฟังก์ชัน 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 ยังทำให้เกิดเอฟเฟกต์การเปลี่ยนที่มีประสิทธิภาพสูงกว่ามากทั่วทั้งอินเทอร์เน็ต เมื่อประสิทธิภาพตรงกับการโต้ตอบ ทุกคน
ได้ประโยชน์!
รูปภาพปก: Siora Photography สำหรับ Unsplash