Co to są pasywni nasłuchujący zdarzeń?


Odpowiedzi:


213

Pasywne nasłuchiwanie zdarzeń to wyłaniający się standard sieciowy, nowa funkcja dostępna w Chrome 51, która zapewnia znaczny potencjalny wzrost wydajności przewijania. Informacje o wersji Chrome.

Umożliwia programistom wybranie lepszej wydajności przewijania, eliminując potrzebę przewijania w celu zablokowania słuchaczy zdarzeń za pomocą dotyku i kółka.

Problem: Wszystkie nowoczesne przeglądarki mają funkcję przewijania w wątkach, która umożliwia płynne przewijanie nawet wtedy, gdy działa kosztowny JavaScript, ale ta optymalizacja jest częściowo pokonana przez konieczność oczekiwania na wyniki któregokolwiek touchstarti programów touchmoveobsługi, co może całkowicie uniemożliwić przewijanie, wywołując preventDefault()na wydarzeniu.

Rozwiązanie: {passive: true}

Oznaczając odbiornik dotyku lub kółka jako pasywny, programista obiecuje, że program obsługi nie będzie wywoływał funkcji preventDefaultprzewijania. 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 , Demo Video , Explainer Doc


1
więc zawsze powinniśmy dodawać te linie kodu (przynajmniej w większości przypadków), prawda?
Altiano Gerung,

To zawiesza twój silnik js w Mozilli. Lepiej wykryj przeglądarkę przed dołączeniem tego odbiornika zdarzeń
yardpenalty.com

@AltianoGerung Kiedy przeglądarka to zaleca. Zostanie wyświetlony komunikat na karcie Informacje lub Ostrzeżenie konsoli.
snowYetis

@ yardpenalty.com Możemy użyć następującego wypełnienia i uniknąć kontroli przeglądarki. W przypadku przewijania przypadków użycia użycie pasywnych detektorów zdarzeń jest dużym plusem. github.com/WICG/EventListenerOptions/blob/gh-pages/…
Vikrant Siwach

@Vikrant Siwach świetna rada. Polyfill są szybkie i nieco bezbolesne, gdy zarządzasz nimi wszystkimi w, powiedzmy, polyfill.js
yardpenalty.com
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.