Hizalanmış giriş etkinlikleri

Özet

• Chrome 60, etkinlik sıklığını azaltarak ve böylece kare zamanlamasının tutarlılığını iyileştirerek olumsuzlukları azaltır.
• Chrome 58'de kullanıma sunulan getCoalescedEvents() yöntemi, bugüne kadar sahip olduğunuz zengin etkinlik bilgilerinin aynısını sunar.

Sorunsuz bir kullanıcı deneyimi sağlamak web için önemlidir. Bir giriş etkinliğini alma ile görsellerin gerçekten güncellendiği zaman arasındaki süre önemlidir ve genellikle daha az iş yapmak da önemlidir. Chrome'un geçtiğimiz birkaç sürümünde, bu cihazlardaki giriş gecikmesini azalttık.

Sorunsuz bir deneyim ve performans sağlamak amacıyla Chrome 60'ta, sağlanan bilgilerin ayrıntı düzeyini artırırken bu etkinliklerin daha düşük sıklıkta gerçekleşmesine neden olan bir değişiklik yapıyoruz. Tıpkı Jelly Bean'in piyasaya sürülmesi ve Android'deki girişi uyumlu hale getiren Koreograf'ın getirilmesi gibi, tüm platformlarda kare hizalı girişi web'e taşıyoruz.

Ancak bazen daha fazla etkinliğe ihtiyacınız olabilir. Bu nedenle, Chrome 58'de getCoalescedEvents() adlı bir yöntemi uyguladık. Bu yöntem, uygulamanızın daha az etkinlik alırken bile işaretçinin tam yolunu alabilmesini sağlar.

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

Etkinlik sıklığını azaltma

Bazı temel bilgileri inceleyelim: Dokunmatik ekranlar 60-120 Hz'de giriş, fareler ise genellikle 100 Hz'de giriş sağlar (ancak 2.000 Hz'e kadar olan yerlerde olabilir). Ancak monitörler genellikle 60 Hz yenileme hızına sahiptir. Peki bu ne anlama geliyor? Bu, ekranı gerçekten güncellediğimizden daha yüksek bir hızda giriş aldığımız anlamına gelir. Şimdi de geliştirici Araçları'ndaki basit bir tuval boyama uygulaması için performans zaman çizelgesine göz atalım.

Aşağıdaki resimde, requestAnimationFrame() hizalı giriş devre dışıyken her karede tutarsız kare süresine sahip birden fazla işleme bloğu görebilirsiniz. Küçük sarı bloklar, DOM etkinliğinin hedefi, etkinliğin gönderilmesi, JavaScript'in çalıştırılması, üzerine gelinen düğümün güncellenmesi ve muhtemelen düzen ile stillerin yeniden hesaplanması gibi şeyler için isabet testlerini gösterir.

Peki neden görsel güncellemeye neden olmayacak ekstra bir çalışma yapıyoruz? İdeal olarak, kullanıcıya fayda sağlamayan bir iş yapmak istemiyoruz. Giriş ardışık düzeni, Chrome 60'tan itibaren sürekli etkinliklerin (wheel, mousewheel, touchmove, pointermove, mousemove) gönderilmesini geciktirir ve bunları requestAnimationFrame()geri çağırma işleminden hemen önce gönderir. Aşağıdaki resimde (bu özellik etkin durumdayken), daha tutarlı bir kare süresi ve daha az süre işleme etkinliği görürsünüz.

Canary ve Yeni geliştirilenler kanallarında bu özelliğin etkinleştirildiği bir deneme yürütüyoruz ve% 35 daha az isabet testi gerçekleştirdiğimizi tespit ettik. Bu testler, ana iş parçacığının daha sık çalışmaya hazır olmasını sağlar.

Web geliştiricilerinin dikkat etmesi gereken önemli bir nokta da, gerçekleşen tüm ayrı etkinliklerin (ör. keydown, keyup, mouseup, mousedown, touchstart, touchend) göreli sıralama korunarak bekleyen etkinliklerle birlikte hemen gönderileceğidir. Bu özellik etkinleştirildiğinde, işin önemli bir kısmı normal etkinlik döngüsü akışına uygun hale gelir ve tutarlı bir giriş aralığı sağlar. Böylece, Chrome'daki etkinlik döngüsü akışına kolayca eklenmiş olan scroll ve resize etkinlikleriyle uyumlu olan sürekli etkinlikler elde edilir.

Bu tür etkinlikleri tüketen uygulamaların büyük çoğunluğunun daha yüksek sıklık için bir faydası olmadığını tespit ettik. Android birkaç yıldır etkinlikleri uyumlu hale getirmiş olduğundan yeni bir şey söz konusu olmasa da siteler masaüstü platformlarda daha az ayrıntılı etkinlikler görebilir. Giriş düzgünlüğünde kesintilere neden olan düşük ana iş parçacıkları her zaman bir sorun olmuştur. Bu da uygulama çalışırken sıçramalar görebileceğiniz anlamına gelir ve işaretçinin bir noktadan diğerine nasıl gittiğini bilmeyi imkansız hale getirir.

getCoalescedEvents() yöntemi

Dediğim gibi, uygulamanın işaretçinin tam yolunu bilmek isteyeceği nadir senaryolar vardır. Büyük artışlar ve daha az etkinlik sıklığı görülmesi sorununu düzeltmek için Chrome 58'de getCoalescedEvents() adlı işaretçi etkinliklerine yönelik bir uzantıyı kullanıma sunduk. Aşağıda, bu API'yi kullanırsanız ana iş parçacığındaki jank'ın uygulamada nasıl gizlendiğine dair bir örnek verilmiştir.

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

Genellikle bir çizim uygulaması, etkinlikteki ofsetlere bakarak bir nokta çizmiş olabilir:

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

Bu kod, etkinlik dizisini kullanacak ş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 gerçekte dağıtılmadığından, sürüş için hazır olduklarından başarılı bir şekilde test edilmezler. currentTarget ve eventPhase gibi bazı alanların varsayılan değerleri olur. stopPropagation() veya preventDefault() gibi dağıtımla ilgili yöntemlerin çağrılmasının üst etkinlik üzerinde herhangi bir etkisi olmaz.