การหลีกเลี่ยงสีเป็นสิ่งสำคัญในการสร้างอัตราเฟรมที่ลื่นไหล โดยเฉพาะอย่างยิ่งในอุปกรณ์เคลื่อนที่ อย่างไรก็ตาม บางครั้งอาจมีการครอบตัดสีขึ้นในสถานที่ที่แปลกใหม่ที่สุด บทความนี้จะอธิบายสาเหตุที่ GIF แบบเคลื่อนไหวอาจทำให้เกิดการวาดที่ไม่จำเป็น รวมทั้งวิธีแก้ไขง่ายๆ ที่คุณนำไปใช้ได้
เลเยอร์แห่งความน่ารัก
ดังที่คุณอาจทราบอยู่แล้วว่าเบราว์เซอร์ที่ทันสมัยอาจระบายสีกลุ่มขององค์ประกอบ DOM ให้เป็น "รูปภาพ" แยกกัน ซึ่งเรียกว่าเลเยอร์ บางครั้งอาจมีเลเยอร์เดียวสำหรับทั้งหน้า บางครั้งก็มีหลายร้อยเลเยอร์ หรือในบางกรณีที่พบไม่บ่อยนัก - หลักพัน!
เมื่อองค์ประกอบ DOM ถูกจัดกลุ่มเข้าด้วยกันเป็นเลเยอร์และองค์ประกอบหนึ่งมีการเปลี่ยนแปลงที่มองเห็นได้ เราก็จะต้องระบายสีทั้งองค์ประกอบที่เปลี่ยนแปลง รวมถึงองค์ประกอบอื่นๆ ทั้งหมดในเลเยอร์ที่ซ้อนทับองค์ประกอบที่เปลี่ยนแปลงด้วยเช่นกัน การทาสีสิ่งหนึ่งทับผลลัพธ์อื่นในพิกเซลที่ถูกเขียนทับจะ "สูญหาย" ไปตลอดกาล ถ้าคุณต้องการให้พิกเซลเดิมกลับมาอีก คุณจะต้องแสดงผลพิกเซลใหม่
บางครั้งเราจึงต้องการแยกองค์ประกอบหนึ่งออกจากอีกองค์ประกอบหนึ่ง เพื่อจะได้ไม่ต้องทําสีองค์ประกอบอื่นๆ ที่ยังไม่ได้เปลี่ยนแปลงอีก ตัวอย่างเช่น เมื่อคุณรวมส่วนหัวของหน้าแบบคงที่เข้ากับเนื้อหาที่เลื่อนได้ คุณจะต้องวาดส่วนหัวใหม่ทุกครั้งที่เนื้อหาเลื่อน รวมถึงเนื้อหาที่เพิ่งมองเห็นได้ การวางส่วนหัวในเลเยอร์แยกต่างหากจะช่วยให้เบราว์เซอร์สามารถเพิ่มประสิทธิภาพการเลื่อนได้ เมื่อคุณเลื่อน เบราว์เซอร์อาจย้ายเลเยอร์ไปรอบๆ โดยอาจใช้ GPU คอยช่วย และหลีกเลี่ยงการวาดเลเยอร์เดิมซ้ำอีกชั้น
ชั้นเพิ่มเติมแต่ละชั้นจะเพิ่มการใช้หน่วยความจำและเพิ่มโอเวอร์เฮดประสิทธิภาพ ดังนั้นเป้าหมายคือการจัดกลุ่มหน้าเว็บให้เป็นเลเยอร์ให้น้อยที่สุดเท่าที่จะทำได้ขณะที่ยังคงรักษาประสิทธิภาพที่ดีไว้
ทั้งหมดนี้เกี่ยวข้องกับ GIF แบบเคลื่อนไหวอย่างไร
มาดูรูปภาพนี้กัน
นี่เป็นการตั้งค่าเลเยอร์ที่เป็นไปได้สำหรับแอปง่ายๆ ที่นี่มี 4 เลเยอร์ โดย 3 เลเยอร์ (เลเยอร์ 2-4) เป็นองค์ประกอบของอินเทอร์เฟซ เลเยอร์ด้านหลังคือตัวโหลด ซึ่งจะเป็น GIF แบบเคลื่อนไหว ในขั้นตอนปกติ คุณจะแสดงตัวโหลด (เลเยอร์ 1) ขณะแอปโหลด จากนั้นเมื่อทุกอย่างเสร็จสมบูรณ์ คุณจะเห็นเลเยอร์อื่นๆ แต่สิ่งสำคัญมีดังนี้ คุณต้องซ่อน GIF แบบเคลื่อนไหว
แต่ทำไมฉันต้องซ่อนล่ะ
เป็นคำถามที่ดี ในโลกที่สมบูรณ์แบบ เบราว์เซอร์จะตรวจสอบระดับการมองเห็น GIF แทนคุณ และหลีกเลี่ยงการวาดภาพโดยอัตโนมัติ อย่างไรก็ตาม การตรวจสอบว่าภาพ GIF แบบเคลื่อนไหวถูกบดบังหรือมองเห็นได้บนหน้าจอหรือไม่ มักจะมีค่าใช้จ่ายสูงกว่าการระบายสี ระบบจึงวาดภาพแทน
ในกรณีที่ดีที่สุด GIF จะอยู่ในเลเยอร์ของตัวเอง และเบราว์เซอร์จะต้องระบายสีและอัปโหลดไปยัง GPU เท่านั้น แต่ในกรณีที่แย่ที่สุด องค์ประกอบทั้งหมดอาจถูกจัดกลุ่มเป็นเลเยอร์เดียว และเบราว์เซอร์ต้องทําสีองค์ประกอบทั้งหมดใหม่ และเมื่อทำเสร็จแล้ว ก็ยังคงต้องอัปโหลดทุกอย่างไปยัง GPU ทั้งหมดนี้จะเกิดขึ้นในทุกเฟรม GIF แม้ว่าผู้ใช้จะไม่เห็น GIF ก็ตาม
บนเดสก์ท็อป คุณอาจหมดกังวลไปกับการวาดภาพลักษณะนี้เพราะ CPU และ GPU มีประสิทธิภาพมากกว่า และมีแบนด์วิดท์ปริมาณมากสำหรับการโอนข้อมูลระหว่าง 2 เวอร์ชันนี้ แต่สำหรับอุปกรณ์เคลื่อนที่ การทาสีมีราคาแพงมาก คุณจึงต้องดูแลอย่างมาก
ปัญหานี้ส่งผลกระทบต่อเบราว์เซอร์ใดบ้าง
ลักษณะการทำงานที่ต่างกันในแต่ละเบราว์เซอร์ก็เช่นกัน ทุกวันนี้ Chrome, Safari และ Opera จะทำสีใหม่แม้ว่า GIF จะถูกปิดบังไว้ก็ตาม ในทางกลับกัน Firefox จะพบว่า GIF นั้นบดบังอยู่และไม่จำเป็นต้องทาสีใหม่ Internet Explorer ยังคงเป็นเหมือนกล่องดำและแม้แต่ใน IE11 ตั้งแต่เรากำลังพัฒนาเครื่องมือ F12 อยู่ ไม่มีการบ่งชี้ว่ามีการทำซ้ำเกิดขึ้นหรือไม่
ฉันจะทราบได้อย่างไรว่าฉันมีปัญหานี้
วิธีที่ง่ายที่สุดคือการใช้ "แสดงสี่เหลี่ยมผืนผ้าสี" ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โหลดเครื่องมือสำหรับนักพัฒนาเว็บ แล้วกดเฟืองที่มุมล่างขวา (
) แล้วเลือกแสดงสี่เหลี่ยมผืนผ้าสีในส่วนการแสดงผล
สิ่งที่คุณต้องทำคือมองหาสี่เหลี่ยมผืนผ้าสีแดงดังนี้
กล่องสีแดงเล็กๆ บนหน้าจอแสดงให้เห็นว่า Chrome กำลังทำบางอย่างใหม่ คุณรู้ว่ามี GIF ของเครื่องมือโหลดซ่อนอยู่หลังองค์ประกอบอื่นๆ ดังนั้นเมื่อเห็นกล่องสีแดงแบบนี้ คุณต้องซ่อนองค์ประกอบที่มองเห็นได้และตรวจสอบว่าคุณปล่อย GIF แบบเคลื่อนไหวที่หมุนค้างไปหรือไม่ หากเป็นเช่นนั้น คุณจะต้องใส่ CSS หรือ JavaScript บางส่วนไว้เพื่อใช้ display: none หรือ visibility: hidden กับ CSS หรือองค์ประกอบระดับบนสุด แน่นอนว่าหากนี่เป็นเพียงภาพพื้นหลัง คุณควรแน่ใจว่าได้ลบออกแล้ว
หากคุณต้องการดูตัวอย่างของพฤติกรรมนี้บนเว็บไซต์ที่ใช้งานอยู่ ให้ดู Allegro ซึ่งรูปภาพของผลิตภัณฑ์แต่ละรายการมี GIF ของตัวโหลดที่ถูกปิดบังแทนที่จะซ่อนไว้อย่างชัดแจ้ง
บทสรุป
การบรรลุเป้าหมาย 60 FPS คือการดำเนินการเฉพาะที่จำเป็นในการแสดงผลหน้าเว็บและไม่ต้องทำอีก การนำสีส่วนเกินออกเป็นขั้นตอนสำคัญในการบรรลุเป้าหมายนี้ GIF แบบเคลื่อนไหวที่แสดงค้างไว้อาจทำให้เกิดการระบายสีที่ไม่จำเป็น ซึ่งเป็นสิ่งที่คุณค้นหาและแก้ไขข้อบกพร่องได้ง่ายๆ ด้วยเครื่องมือแสดงรูปสี่เหลี่ยมผืนผ้าของ DevTools
แต่ตอนนี้คุณไม่ได้ปล่อยให้ GIF แบบเคลื่อนไหวของโปรแกรมโหลดลูกแมวเคลื่อนไหวนี้ตลอดไปใช่ไหม