Người nghe sự kiện thụ động là gì?

Trong khi làm việc xung quanh để tăng hiệu suất cho các ứng dụng web tiến bộ, tôi đã Passive Event Listenerstìm thấy một tính năng mới và tôi thấy khó hiểu khái niệm này.

Những gì là Passive Event Listenersvà cần phải có nó trong các dự án của chúng tôi là gì?

Trình lắng nghe sự kiện thụ động là một tiêu chuẩn web mới nổi, tính năng mới được cung cấp trong Chrome 51 cung cấp một tiềm năng lớn cho hiệu suất cuộn. Ghi chú phát hành Chrome.

Nó cho phép các nhà phát triển chọn tham gia để thực hiện cuộn tốt hơn bằng cách loại bỏ nhu cầu cuộn để chặn người nghe sự kiện cảm ứng và bánh xe.

Vấn đề: Tất cả các trình duyệt hiện đại đều có tính năng cuộn theo luồng để cho phép cuộn chạy trơn tru ngay cả khi JavaScript đắt tiền đang chạy, nhưng tối ưu hóa này bị đánh bại một phần do phải chờ kết quả của bất kỳ touchstartvà touchmovetrình xử lý nào, có thể ngăn cuộn hoàn toàn bằng cách gọi preventDefault()vào sự kiện.

Giải pháp: {passive: true}

Bằng cách đánh dấu một người nghe cảm ứng hoặc bánh xe là thụ động, nhà phát triển hứa hẹn người xử lý sẽ không gọi preventDefaultđể vô hiệu hóa cuộn. 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);

DOM Spec , Video Demo , Tài liệu giải thích