Hizalanmış giriş etkinlikleri

Dave Tapuska

Özet

• Chrome 60, etkinlik sıklığını düşürerek takılmaları azaltır ve böylece kare zamanlamasının tutarlılığını artırır.
• Chrome 58'de kullanıma sunulan getCoalescedEvents() yöntemi, daha önce kullandığınız etkinlik bilgilerinin aynısını sağlar.

Web'de sorunsuz bir kullanıcı deneyimi sunmak önemlidir. Giriş etkinliğinin alınması ile görsellerin güncellenmesi arasındaki süre önemlidir ve genellikle daha az iş yapmak önemlidir. Chrome'un son birkaç sürümünde, bu cihazlardaki giriş gecikmesini azalttık.

Chrome 60'ta, sorunsuzluk ve performans için bu etkinliklerin daha düşük sıklıkta gerçekleşmesine neden olurken sağlanan bilgilerin ayrıntı düzeyini artıran bir değişiklik yapıyoruz. Jelly Bean'in kullanıma sunulduğu ve Android'de girişi hizalayan Koreograf'ın kullanıma sunulduğu zamana benzer şekilde, tüm platformlarda web'e kare hizalı girişi sunuyoruz.

Ancak bazen daha fazla etkinliğe ihtiyacınız olur. Bu nedenle, Chrome 58'de, uygulamanızın daha az etkinlik alırken bile işaretçinin tam yolunu almasına olanak tanıyan getCoalescedEvents() adlı bir yöntem uyguladık.

Öncelikle etkinlik sıklığından bahsedelim.

Etkinlik sıklığını düşürme

Bazı temel bilgileri anlayalım: Dokunmatik ekranlar 60-120 Hz, fareler ise genellikle 100 Hz (ancak 2000 Hz'e kadar olabilir) hızında giriş sağlar. Ancak monitörlerin tipik yenileme hızı 60 Hz'dir. Peki bu tam olarak ne anlama geliyor? Bu, girişi ekranı güncellediğimizden daha yüksek bir hızda aldığımız anlamına gelir. Basit bir kanvas boyama uygulaması için devtools'deki performans zaman çizelgesine bakalım.

Aşağıdaki resimde, requestAnimationFrame() hizalanmış giriş devre dışıyken tutarsız kare süresi olan kare başına birden fazla işleme bloğu görebilirsiniz. Küçük sarı bloklar, DOM etkinliğinin hedefi, etkinliğin dağıtılması, JavaScript'in çalıştırılması, fareyle üzerine gelinen düğümün güncellenmesi ve muhtemelen düzen ile stillerin yeniden hesaplanması gibi işlemler için isabet testini gösterir.

Peki neden görsel güncellemelere neden olmayan ek çalışmalar yapıyoruz? İdeal olarak, kullanıcıya fayda sağlamayan hiçbir çalışma yapmak istemeyiz. Chrome 60'tan itibaren giriş ardışık düzeni, sürekli etkinliklerin (wheel, mousewheel, touchmove, pointermove, mousemove) gönderilmesini geciktirir ve bunları requestAnimationFrame() geri çağırma işlevi gerçekleşmeden hemen önce gönderir. Aşağıdaki resimde (özellik etkinken), daha tutarlı bir kare süresi ve etkinlikleri işlemek için daha az süre görebilirsiniz.

Canary ve Dev kanallarında bu özelliği etkinleştirerek bir deneme yürüttük ve isabet testi sayısını% 35 oranında azalttığımızı tespit ettik. Bu sayede ana iş parçacığı daha sık çalışmaya hazır hale geliyor.

Web geliştiricilerinin dikkat etmesi gereken önemli bir nokta, gerçekleşen tüm ayrı etkinliklerin (ör. keydown, keyup, mouseup, mousedown, touchstart, touchend), bekleyen etkinliklerle birlikte hemen gönderileceği ve göreceli sıralamanın korunacağıdır. Bu özellik etkinleştirildiğinde, işin büyük bir kısmı normal etkinlik döngüsü akışına aktarılarak tutarlı bir giriş aralığı sağlanır. Bu sayede sürekli etkinlikler, Chrome'daki etkinlik döngüsü akışına zaten entegre edilmiş scroll ve resize etkinlikleriyle uyumlu hale gelir.

Bu tür etkinlikleri tüketen uygulamaların büyük çoğunluğunun daha yüksek sıklıkta veri gönderme özelliğinden yararlanmadığını tespit ettik. Android, etkinlikleri birkaç yıldır uyumlu hale getirdiği için burada yeni bir şey yok ancak siteler masaüstü platformlarında daha az ayrıntılı etkinlikler deneyimleyebilir. Girişlerin pürüzsüzlüğünü bozan sarsıntılı ana iş parçacıkları ile ilgili her zaman bir sorun olmuştur. Bu, uygulama çalışırken konumda sıçramalar görebileceğiniz anlamına gelir. Bu da işaretçinin bir noktadan diğerine nasıl geçtiğini bilmenizi imkansız hale getirir.

getCoalescedEvents() yöntemi

Daha önce de belirttiğim gibi, uygulamanın işaretçinin tam yolunu bilmeyi tercih ettiği nadir senaryolar vardır. Bu nedenle, büyük sıçramalar ve etkinliklerin sıklığının azaldığı durumları düzeltmek için Chrome 58'de getCoalescedEvents() adlı bir işaretçi etkinlikleri uzantısı kullanıma sunduk. Aşağıda, bu API'yi kullandığınızda ana iş parçacığındaki takılmanın uygulamadan nasıl gizlendiğine dair bir örnek verilmiştir.

Tek bir etkinlik yerine, etkinliğe neden olan geçmiş etkinlikler dizisine erişebilirsiniz. Android, iOS ve Windows'un yerel SDK'larında çok benzer API'ler vardır ve web'de de benzer bir API sunuyoruz.

Bir çizim uygulaması genellikle etkinlikteki ofsetlere bakarak bir nokta çizebilir:

window.addEventListener("pointermove", function(event) {
    drawPoint(event.pageX, event.pageY);
});

Bu kod, etkinlik dizisi kullanılacak şekilde kolayca değiştirilebilir:

window.addEventListener("pointermove", function(event) {
    var events = 'getCoalescedEvents' in event ? event.getCoalescedEvents() : [event];
    for (let e of events) {
    drawPoint(e.pageX, e.pageY);
    }
});

Birleştirilmiş etkinliklerdeki her özelliğin doldurulmadığını unutmayın. Birleştirilmiş etkinlikler aslında dağıtılmaz, yalnızca birlikte gönderilir. Bu nedenle, isabet testi yapılmaz. currentTarget ve eventPhase gibi bazı alanlar varsayılan değerlerine sahip olacaktır. stopPropagation() veya preventDefault() gibi dağıtımla ilgili yöntemlerin çağrılmasının ana etkinlik üzerinde hiçbir etkisi olmaz.