wheel kaydırma/yakınlaştırma performansını artırmak için geliştiricilerin, {passive: true} seçeneğini addEventListener()'e ileterek wheel ve mousewheel etkinlik işleyicilerini pasif olarak kaydettirmeleri önerilir. Etkinlik işleyicileri pasif olarak kaydettiğinizde tarayıcı, tekerlek işleyicilerinin preventDefault() çağrısı yapmayacağını anlar ve işleyicileri engellemeden kaydırma ve yakınlaştırma işlemlerini güvenli bir şekilde gerçekleştirebilir.
Sorun, tekerlek etkinliği dinleyicilerinin çoğu zaman kavramsal olarak pasif olması (preventDefault() çağrılmaz) ancak bu şekilde açıkça belirtilmemesidir. Bu da, beklemek gerekmediği halde tarayıcıdan kaydırmaya/yakınlaştırmaya başlamadan önce JS etkinlik işlemenin tamamlanmasını beklemesini gerektirir. Chrome 56'da touchstart ve touchmove için bu sorunu düzelttik. Bu değişiklik daha sonra hem Safari hem de Firefox tarafından benimsendi. O dönemde hazırladığımız gösterim videosunda da görebileceğiniz gibi, davranışın olduğu gibi bırakılması, kaydırma yanıtında belirgin bir gecikme oluşturuyordu. Chrome 73'te, aynı müdahaleyi wheel ve mousewheel etkinliklerine uyguladık.
Müdahale
Bu değişiklikle amacımız, kullanıcı tekerleği veya dokunmatik yüzeyle kaydırmaya başladıktan sonra geliştiricilerin kod değiştirmesine gerek kalmadan ekranın güncellenmesi için gereken süreyi azaltmaktır. Metriklerimiz, kök hedeflere (pencere, doküman veya gövde) kaydedilen wheel ve mousewheel etkinlik dinleyicilerinin% 75'inin pasif seçenek için herhangi bir değer belirtmediğini ve bu dinleyicilerin% 98'inden fazlasının preventDefault()'yi çağırmadığını gösteriyor. Chrome 73'te, kök hedeflere (pencere, belge veya gövde) kaydedilen wheel ve mousewheel dinleyicilerini varsayılan olarak etkin olmayan olarak değiştiriyoruz. Bu, aşağıdaki gibi bir etkinlik işleyicinin olduğu anlamına gelir:
window.addEventListener("wheel", func);
şuna eş değer olur:
window.addEventListener("wheel", func, {passive: true});
Dinleyici içinde preventDefault() çağrısı yapıldığında aşağıdaki DevTools uyarısıyla birlikte yoksayılır:
[Intervention] Unable to preventDefault inside passive event listener due
to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312
Hasar ve Rehberlik
Çoğu durumda, herhangi bir kesinti görülmez. Yalnızca nadiren (metriklerimize göre sayfaların% 0,3'ünden azında) varsayılan olarak pasif olarak değerlendirilen dinleyiciler içinde preventDefault() çağrısının yoksayılması nedeniyle istenmeyen kaydırma/yakınlaştırma gerçekleşebilir. Uygulamanız, preventDefault() çağrısının defaultPrevented mülkü aracılığıyla herhangi bir etkisi olup olmadığını kontrol ederek bu durumla karşılaşıp karşılaşmadığını belirleyebilir. Etkilenen durumlar için çözüm nispeten kolaydır: Varsayılan davranışı geçersiz kılmak ve etkinlik dinleyicisini engelleme olarak korumak için {passive: false} değerini addEventListener() değerine iletin.