Listener เหตุการณ์แบบแตะและลูกกลิ้งเป็นประโยชน์ สำหรับการติดตามการโต้ตอบของผู้ใช้และสร้างประสบการณ์การเลื่อนที่กำหนดเอง แต่ก็อาจทำให้การเลื่อนหน้าเว็บล่าช้าได้เช่นกัน ขณะนี้เบราว์เซอร์ไม่ทราบว่า Listener เหตุการณ์จะป้องกันไม่ให้การเลื่อนหรือไม่ จึงรอให้ Listener ทำงานเสร็จก่อนที่จะเลื่อนหน้าเว็บเสมอ Listener เหตุการณ์แบบแพสซีฟแก้ปัญหานี้โดยให้คุณระบุว่า Listener เหตุการณ์จะไม่ขัดขวางการเลื่อน
ความเข้ากันได้กับเบราว์เซอร์
เบราว์เซอร์ส่วนใหญ่รองรับ Listener เหตุการณ์แบบแพสซีฟ ดู ความเข้ากันได้ของเบราว์เซอร์
การตรวจสอบ Listener เหตุการณ์แบบแพสซีฟของ Lighthouse ทำไม่สำเร็จ
Lighthouse จะแจ้ง Listener เหตุการณ์ที่อาจทำให้การเลื่อนหน้าเว็บล่าช้า
Lighthouse ใช้กระบวนการต่อไปนี้เพื่อระบุ Listener เหตุการณ์ที่อาจส่งผลต่อประสิทธิภาพการเลื่อน
- รวบรวม Listener เหตุการณ์ทั้งหมดในหน้าเว็บ
- กรอง Listener แบบไม่แตะและไม่ใช้ลูกกลิ้งออก
- กรองผู้ฟังที่โทรหา
preventDefault()ออก - กรอง Listener ที่มาจากโฮสต์อื่นที่ไม่ใช่หน้าเว็บออก
Lighthouse จะกรอง Listener ออกจากโฮสต์ต่างๆ เนื่องจากคุณอาจไม่สามารถควบคุมสคริปต์เหล่านี้ อาจมีสคริปต์ของบุคคลที่สามที่ส่งผลเสียต่อประสิทธิภาพการเลื่อนของหน้าเว็บ แต่สคริปต์เหล่านี้ไม่ได้แสดงในรายงาน Lighthouse
วิธีสร้าง Listener เหตุการณ์แบบแพสซีฟเพื่อปรับปรุงประสิทธิภาพการเลื่อน
เพิ่ม Flag passive ใน Listener เหตุการณ์ทั้งหมดที่ Lighthouse ระบุไว้
หากคุณรองรับเฉพาะเบราว์เซอร์ที่มีการรองรับ Listener เหตุการณ์แบบแพสซีฟ ให้เพิ่มแฟล็ก เช่น
document.addEventListener('touchstart', onTouchStart, {passive: true});
หากคุณรองรับเบราว์เซอร์รุ่นเก่าที่ไม่รองรับ Listener เหตุการณ์แบบแพสซีฟ คุณจะต้องใช้การตรวจจับฟีเจอร์หรือ Polyfill โปรดดูข้อมูลเพิ่มเติมในส่วนการตรวจจับฟีเจอร์ของเอกสารคำอธิบาย Passive Event Listener ของ WICG