ใช้ Listener แบบแพสซีฟเพื่อปรับปรุงประสิทธิภาพการเลื่อน

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

ความเข้ากันได้กับเบราว์เซอร์

เบราว์เซอร์ส่วนใหญ่รองรับ Listener เหตุการณ์แบบแพสซีฟ โปรดดู ความเข้ากันได้กับเบราว์เซอร์

สาเหตุที่การตรวจสอบ Listener เหตุการณ์แบบแพสซีฟของ Lighthouse ไม่สําเร็จ

Lighthouse แจ้ง Listener เหตุการณ์ที่อาจทำให้เลื่อนหน้าเว็บเลื่อน ดังนี้

การตรวจสอบ Lighthouse แสดงหน้าไม่ได้ใช้ Listener เหตุการณ์แบบแพสซีฟเพื่อปรับปรุงประสิทธิภาพการเลื่อน

Lighthouse ใช้กระบวนการต่อไปนี้ เพื่อระบุ Listener เหตุการณ์ที่อาจส่งผลต่อประสิทธิภาพการเลื่อน

  1. รวบรวม Listener เหตุการณ์ทั้งหมดในหน้าเว็บ
  2. กรองผู้ฟังที่ไม่ใช่แบบสัมผัสและที่ไม่ใช่แบบล้อออก
  3. กรองผู้ฟังที่โทรหา preventDefault() ออก
  4. กรอง Listener ที่มาจากโฮสต์อื่นที่ไม่ใช่หน้าออก

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

วิธีทำให้ Listener เหตุการณ์เป็นแบบแพสซีฟเพื่อปรับปรุงประสิทธิภาพการเลื่อน

เพิ่ม Flag passive ลงใน Listener เหตุการณ์ทั้งหมดที่ Lighthouse ระบุ

หากคุณรองรับเฉพาะเบราว์เซอร์ที่รองรับ Listener เหตุการณ์แบบแพสซีฟ ก็เพียงเพิ่ม Flag เช่น

document.addEventListener('touchstart', onTouchStart, {passive: true});

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

แหล่งข้อมูล