ใช้ Listener แบบแพสซีฟเพื่อปรับปรุงประสิทธิภาพการเลื่อน
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
Listener เหตุการณ์แบบแตะและลูกกลิ้งเป็นประโยชน์
สำหรับการติดตามการโต้ตอบของผู้ใช้และสร้างประสบการณ์การเลื่อนที่กำหนดเอง
แต่ก็อาจทำให้การเลื่อนหน้าเว็บล่าช้าได้เช่นกัน
ขณะนี้เบราว์เซอร์ไม่ทราบว่า Listener เหตุการณ์จะป้องกันไม่ให้การเลื่อนหรือไม่ จึงรอให้ Listener ทำงานเสร็จก่อนที่จะเลื่อนหน้าเว็บเสมอ
Listener เหตุการณ์แบบแพสซีฟแก้ปัญหานี้โดยให้คุณระบุว่า Listener เหตุการณ์จะไม่ขัดขวางการเลื่อน
ความเข้ากันได้กับเบราว์เซอร์
เบราว์เซอร์ส่วนใหญ่รองรับ Listener เหตุการณ์แบบแพสซีฟ ดู
ความเข้ากันได้ของเบราว์เซอร์
การตรวจสอบ Listener เหตุการณ์แบบแพสซีฟของ Lighthouse ทำไม่สำเร็จ
Lighthouse
จะแจ้ง Listener เหตุการณ์ที่อาจทำให้การเลื่อนหน้าเว็บล่าช้า
Lighthouse ใช้กระบวนการต่อไปนี้เพื่อระบุ Listener เหตุการณ์ที่อาจส่งผลต่อประสิทธิภาพการเลื่อน
- รวบรวม Listener เหตุการณ์ทั้งหมดในหน้าเว็บ
- กรอง Listener แบบไม่แตะและไม่ใช้ลูกกลิ้งออก
- กรองผู้ฟังที่โทรหา
preventDefault()
ออก
- กรอง Listener ที่มาจากโฮสต์อื่นที่ไม่ใช่หน้าเว็บออก
Lighthouse จะกรอง Listener ออกจากโฮสต์ต่างๆ
เนื่องจากคุณอาจไม่สามารถควบคุมสคริปต์เหล่านี้
อาจมีสคริปต์ของบุคคลที่สามที่ส่งผลเสียต่อประสิทธิภาพการเลื่อนของหน้าเว็บ
แต่สคริปต์เหล่านี้ไม่ได้แสดงในรายงาน Lighthouse
เพิ่ม Flag passive
ใน Listener เหตุการณ์ทั้งหมดที่ Lighthouse ระบุไว้
หากคุณรองรับเฉพาะเบราว์เซอร์ที่มีการรองรับ Listener เหตุการณ์แบบแพสซีฟ ให้เพิ่มแฟล็ก เช่น
document.addEventListener('touchstart', onTouchStart, {passive: true});
หากคุณรองรับเบราว์เซอร์รุ่นเก่าที่ไม่รองรับ Listener เหตุการณ์แบบแพสซีฟ คุณจะต้องใช้การตรวจจับฟีเจอร์หรือ Polyfill โปรดดูข้อมูลเพิ่มเติมในส่วนการตรวจจับฟีเจอร์ของเอกสารคำอธิบาย Passive Event Listener ของ WICG
แหล่งข้อมูล
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2019-05-02 UTC
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"ไม่มีข้อมูลที่ฉันต้องการ"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"ล้าสมัย"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"ปัญหาเกี่ยวกับการแปล"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"อื่นๆ"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"เข้าใจง่าย"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"แก้ปัญหาของฉันได้"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"อื่นๆ"
}]
{"lastModified": "\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14 2019-05-02 UTC"}
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2019-05-02 UTC"],[],[]]