Listener เหตุการณ์แบบแตะและลูกกลิ้งเป็นประโยชน์ สำหรับการติดตามการโต้ตอบของผู้ใช้และสร้างประสบการณ์การเลื่อนที่กำหนดเอง แต่ก็อาจทำให้การเลื่อนหน้าเว็บล่าช้าได้เช่นกัน ขณะนี้เบราว์เซอร์ไม่ทราบว่า Listener เหตุการณ์จะป้องกันไม่ให้การเลื่อนหรือไม่ จึงรอให้ Listener ทำงานเสร็จก่อนที่จะเลื่อนหน้าเว็บเสมอ Listener เหตุการณ์แบบแพสซีฟแก้ปัญหานี้โดยให้คุณระบุว่า Listener เหตุการณ์จะไม่ขัดขวางการเลื่อน
ความเข้ากันได้กับเบราว์เซอร์
เบราว์เซอร์ส่วนใหญ่รองรับ Listener เหตุการณ์แบบแพสซีฟ ดู ความเข้ากันได้ของเบราว์เซอร์
การตรวจสอบ Listener เหตุการณ์แบบแพสซีฟของ Lighthouse ทำไม่สำเร็จ
Lighthouse จะแจ้ง Listener เหตุการณ์ที่อาจทำให้การเลื่อนหน้าเว็บล่าช้า
![หน้าแสดงการตรวจสอบ Lighthouse ไม่ได้ใช้ Listener เหตุการณ์แบบแพสซีฟเพื่อปรับปรุงประสิทธิภาพการเลื่อน](https://developer.chrome.com/static/docs/lighthouse/best-practices/uses-passive-event-listeners/image/lighthouse-audit-shows-pa-710b643918a3.png?authuser=5&hl=th)
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