Kaydırma duyarlılığının, kullanıcının mobil cihazda web sitesiyle etkileşiminde kritik öneme sahip olduğunu, ancak dokunma etkinliği işleyicilerin çoğu zaman ciddi kaydırma performansı sorunlarına neden olduğunu biliyoruz. Chrome, bu durumu düzeltmek için dokunma etkinliği dinleyicilerinin
pasif
olmasına ({passive: true} seçeneğini addEventListener() seçeneğine iletir) ve
işaretçi etkinlikleri API'sini
göndererek bu durumu ele alıyor.
Bunlar, yeni içerikleri, kaydırmayı engellemeyen modeller halinde oluşturmak için harika özelliklerdir, ancak geliştiriciler bazen bunları anlamakta ve benimsemekte zorlanmaktadır.
Geliştiricilerin, tarayıcı davranışıyla ilgili gizli ayrıntıları anlamalarına gerek kalmadan, web'in varsayılan olarak hızlı olması gerektiğine inanıyoruz. Chrome 56'da, genellikle geliştiricinin amacıyla çalıştığı durumlarda dinleyicileri varsayılan olarak pasif hale getiririz. Bu sayede, siteler üzerindeki olumsuz etkiyi en aza indirirken kullanıcı deneyimini büyük ölçüde iyileştirebileceğimize inanıyoruz.
Nadir durumlarda bu değişiklik, istenmeyen kaydırmaya neden olabilir. Bu durum genellikle kaydırmanın olmaması gereken öğeye bir dokunma işlemi: none stili uygulanarak kolayca çözülebilir. Bu durumdan etkilenip etkilenmediğinizi anlamak ve bu konuda neler yapabileceğinizi öğrenmek, ayrıntılı bilgiyi okumaya devam edin.
Arka plan: İptal Edilebilir Etkinlikler sayfanızı yavaşlatır
touchstart veya ilk touchmove etkinliklerinde preventDefault() çağrısı yaparsanız kaydırmayı engellemiş olursunuz.
Sorun, çoğu zaman dinleyicilerin preventDefault() çağrısı yapmaması, ancak bunun emin olmak için tarayıcının etkinliğin bitmesini beklemesidir.
Geliştirici tarafından tanımlanan "pasif etkinlik işleyiciler" bu sorunu çözer. Etkinlik işleyicinizde üçüncü parametre olarak {passive: true} nesnesine sahip bir dokunma etkinliği eklediğinizde, tarayıcıya touchstart işleyicisinin preventDefault() çağrısı yapmayacağını ve tarayıcının, işleyiciyi engellemeden kaydırma işlemini güvenli bir şekilde gerçekleştirebileceğini bildirmiş olursunuz. Örneğin:
window.addEventListener("touchstart", func, {passive: true} );
Müdahale
Asıl motivasyonumuz, kullanıcı ekrana dokunduktan sonra ekranı güncellemek için gereken süreyi kısaltmak. Dokunmayla başlatma ve dokunarak taşımanın kullanımını anlamak için kaydırma engelleme davranışının ne sıklıkta gerçekleştiğini belirleyen metrikler ekledik.
Kök hedefe (pencere, doküman veya gövde) gönderilen iptal edilebilir dokunma etkinliklerinin yüzdesine baktık ve bu dinleyicilerin yaklaşık% 80'inin kavramsal olarak pasif olduğunu ancak bu şekilde kaydedilmediğini belirledik. Bu sorunun ölçeği dikkate alındığında, bu etkinlikleri otomatik olarak "pasif" hale getirerek, geliştirici herhangi bir işlem yapmadan kaydırmayı iyileştirmek için büyük bir fırsat olduğunu fark ettik.
Bu da bizi, müdahalemizi şu şekilde tanımlamaya yöneltti: Dokunmayla başlatma veya dokunarak taşıma dinleyicisinin hedefi window, document veya body ise passive varsayılan olarak true değerine ayarlıyoruz. Bunun anlamı şudur:
window.addEventListener("touchstart", func);
şuna eşdeğer hale gelir:
window.addEventListener("touchstart", func, {passive: true} );
Artık işleyici içindeki preventDefault() çağrıları yoksayılacak.
Aşağıdaki grafikte, bir kullanıcının ekranı kaydırmak için ekrana dokunmasından, ekranın güncellendiği zamana kadar kaydırmanın en üstteki% 1'lik kısmı için geçen süre gösterilmektedir. Bu veriler, Android için Chrome'daki tüm web siteleri içindir. Müdahale etkinleştirilmeden önce
kaydırmaların% 1'i 400 ms'den biraz daha fazla sürüyordu. Bu süre, Chrome 56 Beta'da şu anda 250 ms'nin biraz
üzerine, yani yaklaşık %38 oranında bir düşüşe düşürüldü. Gelecekte tüm touchstart ve touchmove dinleyicileri için pasif true değerini varsayılan olarak ayarlamayı ve bu değeri 50 ms'nin altına düşürmeyi umuyoruz.
Kırılma ve Yardım
Vakaların büyük çoğunluğunda herhangi bir kesinti yaşanmayacaktır. Ancak bozulma meydana geldiğinde en yaygın belirti, kaydırmanın siz istemediğiniz zaman olmasıdır. Nadiren de olsa, geliştiriciler beklenmedik tıklama etkinlikleri
(touchend işleyicide preventDefault() olmadığı zaman) de fark edebilirler.
Chrome 56 ve sonraki sürümlerde Geliştirici Araçları, müdahalenin etkin olduğu bir etkinlikte preventDefault() komutunu çağırdığınızda günlüğe bir uyarı kaydeder.
touch-passive.html:19 Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
Uygulamanız, preventDefault çağrısının defaultPrevented özelliği üzerinden herhangi bir etkisinin olup olmadığını kontrol ederek böyle bir durumun meydana gelip gelmediğini kontrol edebilir.
Etkilenen sayfaların büyük çoğunluğunun, mümkün olduğunda Touch-action CSS özelliğini uygulayarak nispeten daha kolay bir şekilde düzeltildiğini tespit ettik. Bir öğenin içinde tüm tarayıcının kaydırma ve yakınlaştırma yapmasını önlemek istiyorsanız bu öğeye touch-action: none uygulayın. Yatay bir bandınız varsa kullanıcının normal şekilde dikey kaydırma ve yakınlaştırma yapabilmesi için ona touch-action: pan-y pinch-zoom uygulamayı düşünün. Dokunma işleminin doğru şekilde uygulanması, Masaüstü Edge gibi Dokunma Etkinlikleri'ni değil, İşaretçi Etkinlikleri'ni destekleyen tarayıcılarda zaten gereklidir. Mobil Safari'de ve dokunma işlemini desteklemeyen eski mobil tarayıcılarda,
Chrome tarafından yoksayılacak olsa bile dokunma dinleyicileriniz preventDefault işlevini çağırmaya devam etmelidir.
Daha karmaşık durumlarda aşağıdakilerden birini kullanmanız da gerekebilir:
touchstartişleyicinizpreventDefault()çağırırsa tıklama etkinliklerinin ve diğer varsayılan dokunma davranışlarının oluşturulmasını engellemeye devam etmek için ilişkili dokunma uç işleyicilerinden depreventDefault() çağrıldığından emin olun.- Varsayılan davranışı geçersiz kılmak için
{passive: false}öğesini addEventListener() işlevine son olarak geçirmek (ve kullanılması önerilmez). Kullanıcı Aracısı EventListenerOptions'ı destekliyorsa özellik algılama özelliğini kullanmanız gerekeceğini unutmayın.
Sonuç
Chrome 56'da kaydırma işlemi birçok web sitesinde önemli ölçüde daha hızlı başlar. Bu değişikliğin sonucunda, çoğu geliştiricinin fark edeceği tek etki budur. Geliştiriciler bazı durumlarda istenmeyen kaydırma hareketi fark edebilirler.
Mobil Safari için bunu yapmak yine de gerekli olsa da, Chrome'da bunun yerine getirileceği artık garanti edilmediğinden, web siteleri touchstart ve touchmove dinleyicileri içinde preventDefault() çağrısı yapmayı kabul etmemelidir. Geliştiriciler, dokunma etkinliği gerçekleşmeden önce tarayıcıya bildirim gönderilmesi için kaydırma ve yakınlaştırmanın devre dışı bırakılması gereken öğelere touch-action CSS özelliğini uygulamalıdır.
Bir dokunma işleminin varsayılan davranışını (ör. bir tıklama etkinliğinin oluşturulması) engellemek için touchend işleyicisinin içinde preventDefault() yöntemini çağırın.