Geliştiricilerin wheel kaydırma/yakınlaştırma performansını iyileştirmek için {passive: true} seçeneğini addEventListener() öğesine geçirerek wheel ve mousewheel etkinlik işleyicilerini pasif olarak kaydetmeleri önerilir. Etkinlik işleyicilerin pasif olarak kaydedilmesi, tarayıcıya, tekerlek işleyicilerin preventDefault() çağrısı yapmayacağını ve tarayıcının işleyicileri engellemeden kaydırma ve yakınlaştırmayı güvenli bir şekilde gerçekleştirebileceğini belirtir.
Sorun, tekerlek etkinliği işleyicilerin çoğu zaman kavramsal olarak pasif olmasıdır (preventDefault() çağrısı yapmayın). Ancak bunun açıkça belirtilmediğinden, tarayıcının kaydırmaya/yakınlaştırmaya başlamadan önce, gerekli olmamasına rağmen JS etkinlik işlemesinin tamamlanmasını beklemesi gerekir. Chrome 56'da touchstart ve touchmove için bu sorunu düzelttik ve bu değişiklik daha sonra hem Safari hem de Firefox tarafından benimsendi. O sırada hazırladığımız tanıtım videosundan görebileceğiniz gibi, davranış kaydırma yanıtında fark edilebilir bir gecikmeye yol açmıştı. Artık 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 alanı kaydırmaya başladıktan sonra geliştiricilerin kod değiştirmeye gerek kalmadan ekranı güncelleme süresini azaltmak. Metriklerimiz, kök hedeflere (pencere, doküman veya gövde) kayıtlı olan wheel ve mousewheel etkinlik dinleyicilerinin% 75'inin pasif seçenek için herhangi bir değer belirtmediğini ve bu işleyicilerin% 98'inden fazlasının preventDefault() çağrısını yapmadığını gösteriyor. Chrome 73'te, kök hedeflere (pencere, doküman veya gövde) kayıtlı wheel ve mousewheel işleyicilerini varsayılan olarak pasif olacak şekilde değiştiriyoruz. Bu, bir etkinlik işleyicinin
şun gibi:
window.addEventListener("wheel", func);
şuna eşdeğer hale gelir:
window.addEventListener("wheel", func, {passive: true});
İşleyicinin içinde preventDefault() çağrısı, aşağıdaki Geliştirici Araçları uyarısıyla birlikte yoksayılacak:
[Intervention] Unable to preventDefault inside passive event listener due
to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312
Kırılma ve Yönlendirme
Vakaların büyük çoğunluğunda herhangi bir kesinti yaşanmayacaktır. Nadir durumlarda (metriklerimize göre sayfaların% 0,3'ünden azı), preventDefault() çağrısının varsayılan olarak pasif kabul edilen işleyiciler içinde yoksayılması nedeniyle istenmeyen kaydırma/yakınlaştırma gerçekleşebilir. Uygulamanız, preventDefault() çağrısının defaultPrevented özelliği üzerinden herhangi bir etkisi olup olmadığını kontrol ederek bu sonucun rastgele belirlenip etkilenmediğini belirleyebilir. Etkilenen destek kayıtları için düzeltme işlemi nispeten kolaydır: Varsayılan davranışı geçersiz kılmak ve etkinlik işleyiciyi engelleme olarak korumak için {passive: false} öğesini addEventListener() işlevine iletin.