ในขณะที่กำลังทำงานเพื่อเพิ่มประสิทธิภาพสำหรับแอปเว็บโปรเกรสซีฟฉันได้พบกับคุณสมบัติใหม่Passive Event Listenersและฉันพบว่ามันยากที่จะเข้าใจแนวคิด
อะไรคือPassive Event Listenersสิ่งที่จำเป็นต้องมีในโครงการของเรา
คำตอบ:
ฟังเหตุการณ์แบบพาสซีฟเป็นมาตรฐานใหม่ของเว็บฟีเจอร์ใหม่ที่จัดส่งใน Chrome 51 ซึ่งมีศักยภาพในการเลื่อนที่สำคัญ บันทึกย่อประจำรุ่นของ Chrome
ช่วยให้นักพัฒนาสามารถเลือกใช้งานการเลื่อนที่ดีขึ้นได้โดยไม่จำเป็นต้องเลื่อนเพื่อบล็อกผู้ฟังเหตุการณ์แบบสัมผัสและวงล้อ
ปัญหา:เบราว์เซอร์รุ่นใหม่ทั้งหมดมีคุณสมบัติการเลื่อนแบบเธรดเพื่อให้การเลื่อนทำงานได้อย่างราบรื่นแม้ในขณะที่จาวาสคริปต์ราคาแพงกำลังทำงานอยู่ แต่การเพิ่มประสิทธิภาพนี้พ่ายแพ้บางส่วนโดยไม่ต้องรอผลลัพธ์ของตัวจัดการtouchstartและtouchmoveตัวจัดการซึ่งอาจป้องกันการเลื่อนทั้งหมดpreventDefault()ในเหตุการณ์
สารละลาย: {passive: true}
ด้วยการทำเครื่องหมายผู้ฟังแบบสัมผัสหรือวงล้อเป็นพาสซีฟผู้พัฒนามีแนวโน้มว่าผู้ดูแลจะไม่เรียกpreventDefaultให้ปิดการเลื่อน This frees the browser up to respond to scrolling immediately without waiting for JavaScript, thus ensuring a reliably smooth scrolling experience for the user.
document.addEventListener("touchstart", function(e) {
console.log(e.defaultPrevented); // will be false
e.preventDefault(); // does nothing since the listener is passive
console.log(e.defaultPrevented); // still false
}, Modernizr.passiveeventlisteners ? {passive: true} : false);