ดีเบาเวลาของเครื่องจัดการอินพุต

แฮนเดิลอินพุตอาจเป็นสาเหตุที่ทำให้เกิดปัญหาด้านประสิทธิภาพในแอป เนื่องจากอาจบล็อกเฟรมไม่ให้แสดงจนเสร็จสมบูรณ์ และอาจทำให้เกิดงานด้านเลย์เอาต์เพิ่มเติมที่ไม่จำเป็น

แฮนเดิลอินพุตอาจเป็นสาเหตุของปัญหาด้านประสิทธิภาพในแอป เนื่องจากอาจบล็อกเฟรมไม่ให้แสดงจนเสร็จสมบูรณ์ และอาจทําให้ต้องจัดวางเพิ่มเติมโดยไม่จําเป็น

  • หลีกเลี่ยงตัวแฮนเดิลอินพุตที่ทำงานเป็นเวลานาน เนื่องจากอาจบล็อกการเลื่อน
  • อย่าเปลี่ยนแปลงสไตล์ในตัวแฮนเดิลอินพุต
  • ลบล้างตัวแฮนเดิล เก็บค่าเหตุการณ์ และจัดการกับการเปลี่ยนแปลงสไตล์ในการเรียกกลับ requestAnimationFrame ครั้งถัดไป

หลีกเลี่ยงตัวแฮนเดิลอินพุตที่ทำงานเป็นเวลานาน

ในกรณีที่เร็วที่สุด เมื่อผู้ใช้โต้ตอบกับหน้าเว็บ เทรดคอมโพสิเตอร์ของหน้าเว็บจะรับอินพุตการสัมผัสของผู้ใช้และย้ายเนื้อหาไปรอบๆ ได้ ซึ่งไม่จำเป็นต้องใช้ชุดข้อความหลักที่ทำงานกับ JavaScript, เลย์เอาต์, สไตล์ หรือภาพ

การเลื่อนแบบเบา คอมโพสิเตอร์เท่านั้น

อย่างไรก็ตาม หากคุณแนบตัวแฮนเดิลอินพุต เช่น touchstart, touchmove หรือ touchend เทรดคอมโพสิตต้องรอให้ตัวแฮนเดิลนี้ดำเนินการเสร็จสิ้น เนื่องจากคุณอาจเลือกเรียก preventDefault() และหยุดการเลื่อนด้วยการแตะ แม้ว่าคุณจะไม่ได้เรียกใช้ preventDefault() แต่คอมโพสิตเตอร์ก็ต้องรอ และด้วยเหตุนี้ การเลื่อนของผู้ใช้จึงถูกบล็อก ซึ่งอาจส่งผลให้ภาพกระตุกและพลาดเฟรม

การเลื่อนแบบหนัก คอมโพสิตถูกบล็อกใน JavaScript

กล่าวโดยย่อคือ คุณควรตรวจสอบว่าตัวแฮนเดิลอินพุตที่เรียกใช้ทำงานได้อย่างรวดเร็วและอนุญาตให้คอมโพสิตทำงาน

หลีกเลี่ยงการเปลี่ยนแปลงสไตล์ในตัวแฮนเดิลอินพุต

ระบบจะกำหนดเวลาให้ตัวแฮนเดิลอินพุต เช่น ตัวแฮนเดิลสำหรับการเลื่อนและการสัมผัส ทำงานก่อนการเรียกกลับ requestAnimationFrame

หากคุณทําการเปลี่ยนแปลงภาพภายในตัวแฮนเดิลใดตัวแฮนเดิลหนึ่งดังกล่าว ในช่วงเริ่มต้นของ requestAnimationFrame จะมีการเปลี่ยนแปลงสไตล์ที่รอดำเนินการ หากคุณจากนั้นอ่านพร็อพเพอร์ตี้ภาพในช่วงเริ่มต้นของคอลแบ็ก requestAnimationFrame ตามคำแนะนำใน "หลีกเลี่ยงเลย์เอาต์ขนาดใหญ่ที่ซับซ้อนและการจัดการเลย์เอาต์ที่ไม่ดี" คุณจะทริกเกอร์เลย์เอาต์แบบซิงค์แบบบังคับ

การเลื่อนแบบหนัก คอมโพสิตถูกบล็อกใน JavaScript

ยกเลิกการหน่วงเวลาตัวแฮนเดิลการเลื่อน

วิธีการแก้ปัญหาทั้ง 2 ข้อข้างต้นเหมือนกัน คุณควรกรองการเปลี่ยนแปลงที่มองเห็นได้ไปยัง requestAnimationFrame callback ถัดไปเสมอ ดังนี้

function onScroll (evt) {

   
// Store the scroll value for laterz.
    lastScrollY
= window.scrollY;

   
// Prevent multiple rAF callbacks.
   
if (scheduledAnimationFrame)
   
return;

    scheduledAnimationFrame
= true;
    requestAnimationFrame
(readAndUpdatePage);
}

window
.addEventListener('scroll', onScroll);

ซึ่งการดำเนินการนี้ยังมีข้อดีเพิ่มเติมอีกอย่างหนึ่งคือทำให้ตัวแฮนเดิลอินพุตมีน้ำหนักเบาอยู่เสมอ ซึ่งยอดเยี่ยมมากเนื่องจากตอนนี้คุณไม่ได้บล็อกการดำเนินการต่างๆ เช่น การเลื่อนหรือการแตะในโค้ดที่ต้องใช้การประมวลผลมาก