Passiiviset tapahtumankuuntelijat

Silktide lataa sivusi oikeassa selaimessa ja etsii komentosarjoja, jotka kuuntelevat kosketus- ja hiiren rullapyörätapahtumia tavalla, joka voi viivästyttää vieritystä. Kun nämä kuuntelijat merkitään passiivisiksi, selain voi vierittää heti.

Kun komentosarja kuuntelee kosketus- tai rullatapahtumia, selaimen on odotettava komentosarjan suorittamista ennen vierittämistä siltä varalta, että komentosarja peruuttaa vierityksen. Vilkkailla sivuilla tämä saa vierityksen nykimään tai viivästymään – se on yksi huomattavimmista nykimisen muodoista erityisesti puhelimissa.

Miksi tämä on tärkeää

Vierittäminen on ylivoimaisesti yleisin asia, jonka kävijät tekevät sivulla, ja ihmiset huomaavat heti, jos se ei ole sulavaa. Sormi kosketuksessa epäröivä tai tärisevä sivu tuntuu rikkinäiseltä, vaikka kaikki sen toiminnot toimisivat, ja vaikutelma on voimakkain mobiililaitteilla, joissa kosketusvieritys on jatkuvaa.

Näin korjaat ongelman

Merkitse kosketus- ja rullakuuntelijat passiivisiksi. Tämä lupaa selaimelle, etteivät ne koskaan peruuta vieritystä:

// Estää vierityksen, kunnes käsittelijä suoritetaan
document.addEventListener('touchstart', onTouchStart);

// Passiivinen: selain vierittää heti
document.addEventListener('touchstart', onTouchStart, { passive: true });

Lisää { passive: true } omiin touchstart-, touchmove-, wheel- ja mousewheel-kuuntelijoihisi, ellei kuuntelija todella kutsu preventDefault()-funktiota vierityksen pysäyttämiseksi.
Jos raportoitu kuuntelija on kolmannen osapuolen komentosarjassa, tarkista, onko kirjastosta saatavilla päivitetty versio, tai ota asia esiin toimittajan kanssa – katso kolmannen osapuolen koodi.

Kaikki nykyaikaiset selaimet tukevat passiivisia kuuntelijoita; vain erittäin vanhat selaimet tarvitsevat ominaisuuksien tunnistusta.

Näin Silktide testaa tämän

Lataa sivu oikeassa selaimessa ja etsi kosketus- ja rullatapahtumien tapahtumankuuntelijoita, joita ei ole merkitty passiivisiksi ja jotka voivat viivästyttää vieritystä.
Raportoi kunkin tällaisen kuuntelijan sisältävä komentosarja sekä rivi, jolla se rekisteröidään.

Vianmääritys

Kuuntelijani täytyy peruuttaa vieritys

Kuuntelija, joka todella kutsuu preventDefault()-funktiota vierityksen pysäyttämiseksi, ei voi olla passiivinen – sen merkitseminen passiiviseksi saa selaimen jättämään preventDefault()-kutsun huomiotta. Jos raportoitu kuuntelija todella täytyy peruuttaa vieritys, sen jättäminen ei-passiiviseksi on oikein; harkitse, voitko rajata sen liittämiskohdan niin, ettei se vaikuta vieritykseen muualla sivulla.