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

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

Paul Lewis

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

สรุป

• หลีกเลี่ยงเครื่องจัดการอินพุตที่ทำงานเป็นเวลานาน เพราะพวกเขาอาจบล็อกการเลื่อนได้
• อย่าเปลี่ยนแปลงรูปแบบในเครื่องจัดการอินพุต
• ลบล้างตัวแฮนเดิล จัดเก็บค่าเหตุการณ์ และจัดการกับการเปลี่ยนแปลงสไตล์ในการเรียกกลับ 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);

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