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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

แหล่งข้อมูล