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

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

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

สรุป

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

หลีกเลี่ยงเครื่องจัดการอินพุตที่ใช้เวลานาน

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

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

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

หลีกเลี่ยงการเปลี่ยนแปลงรูปแบบในเครื่องจัดการอินพุต

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

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

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

วิธีแก้ไขของทั้ง 2 โจทย์ข้างต้นจะเหมือนกัน กล่าวคือ คุณควรลบล้างการเปลี่ยนแปลงภาพกับ Callback requestAnimationFrame ถัดไปเสมอ:

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);

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