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

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

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

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

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

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

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

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

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

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

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

เพิ่มpassiveแฟล็กไปยังเครื่องมือฟังเหตุการณ์ทุกรายการที่ Lighthouse ระบุ

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

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

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

แหล่งข้อมูล