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