Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

เพิ่มประสิทธิภาพ SVG Sprite-sheets สำหรับ CSS3 GPU Acceleration บน Mobile Browser

แก้ปัญหา Flickering ด้วย z-index

เมื่อ redraw sprite sheet เฟรมก่อนหน้ายังมองเห็นได้ทำให้กระพริบ วิธีแก้: เพิ่ม z-index ของเฟรมใหม่ทีละขั้น

เทคนิค

  • ทุกครั้งที่วาดเฟรมใหม่ ให้เพิ่ม z-index ขึ้นไป
  • รีเซ็ต z-index กลับเป็น 0 ทุกๆ รอบหนึ่ง (หรือเมื่อถึงค่าสูงสุด) เพื่อไม่ให้ค่ามากเกินไป

วิธีนี้บังคับให้เบราว์เซอร์จัดลำดับการวาดใหม่ ลด flickering ได้มาก