Geliştirici geri bildirimi gerekiyor - Frame Timing API

Paul Lewis
Twitter Ana Sayfa

Geçtiğimiz birkaç yılda tarayıcılar, özellikle mobil cihazlardaki görüntüleme performansı konusunda büyük ilerlemeler kaydetti. Önceden, uzaktan karmaşık olan herhangi bir video için sorunsuz bir kare hızına ulaşmayı hiç umduğunuz yokken, bugün en azından dikkatli olursanız bu hedefe ulaşmak mümkündür.

Yine de çoğumuz, kendi cihazlarımızda makul bir şekilde test edebileceğimiz şeylerle kullanıcılarımızın deneyimi arasında bir kopukluk vardır. 60 fps'yi sorunsuz bir şekilde oynatamazlarsa deneyimleri zarar görür ve nihayetinde başka bir yere giderler ve zarar görürüz. Aynı şekilde, W3C'de kullanıcılarımızın gördüklerini anlamamıza yardımcı olabilecek yeni bir API ele alınmıştır: Frame Timing API.

Yakın zamanda Jake Archibald ve ben, API'yla ilgili genel bakış videosunu kaydettik. Okumak için bu videoyu izlemeyi tercih ederseniz şu videoya göz atabilirsiniz:

Frame Timing API'nin kullanımı

Şüphesiz, Frame Timing API ile yapabileceğiniz birçok şey vardır ve en önemlisi, sizin ve projeniz için nelerin önemli olduğunu ölçmeniz gerekir. Yine de size birkaç fikir verebiliriz:

  • JavaScript ve CSS animasyonlarınızın fps'sini izleme.
  • Sayfa kaydırmalarınızın (veya belki sahip olduğunuz şık sonsuz kaydırma listenizin) sorunsuzluğunu takip etme.
  • Cihazın mevcut yüküne göre gösterim dünyası efektlerinizi otomatik olarak yeniden ölçeklendirin.
  • Çalışma zamanı performans metriklerinde regresyon testi.

Asansör konuşması

API'nin şu anda spesifikasyonda görünümü şu şekildedir: API ile JavaScript, stiller ve düzenin çalıştığı oluşturucu iş parçacığı zamanlaması hakkında veri alabilirsiniz. (Ana iş parçacığı adlı oluşturucu iş parçacığını duymuş olabilirsiniz; başka bir adla aynı şeydir.)

var rendererEvents = window.performance.getEntriesByType("renderer");

Geri aldığınız oluşturucu ileti dizisi kayıtlarının her biri kabaca aşağıdaki gibi görünür:

    {
      sourceFrameNumber: 120,
      startTime: 1342.549374253
      cpuTime: 6.454313323
    }

Her kayıt temelde benzersiz bir kare numarası, karenin başladığı zamanla ilgili yüksek çözünürlüklü bir zaman damgası ve bunun ne kadar CPU süresini kullandığını gösteren birer başka nesnedir. Bunların bir dizisiyle, startTime değerlerinin her birine bakabilir ve ana iş parçacığının 60 fps'de gidip gitmediğini öğrenebilirsiniz. Aslında, "her karenin startTime değeri yaklaşık 16 ms'lik parçalar halinde yükseliyor mu?"

Ancak daha fazlası için cpuTime de alırsınız. Böylece rahatça 16 ms sınırları içinde olup olmadığınızı veya kabloya geçip geçmediğinizi bilirsiniz. cpuTime, 16 ms'lik sınıra yakınsa çöp toplama gibi şeyler için pek yer kalmaz ve CPU kullanımı yüksek olduğunda pil tüketimi de daha fazla olur.

Oluşturucu iş parçacığına ek olarak, boyama ve birleştirmenin gerçekleştiği birleştirici iş parçacığı zamanlaması hakkında da veri çekebilirsiniz:

var compositeThreadEvents = window.performance.getEntriesByType("composite");

Bunların her biri, ana iş parçacığının etkinlikleriyle bağlantı kurmak için kullanabileceğiniz bir kaynak kare numarası da sağlar:

{
    sourceFrameNumber: 120,
    startTime: 1352.343235321
}

Tarayıcılarda birleştirme işleminin genellikle çalışma şekli nedeniyle, oluşturucu iş parçacığı kaydı başına bu kayıtlardan birkaçı bulunabilir. Bu nedenle, bunları tekrar birbirine bağlamak için sourceFrameNumber kullanabilirsiniz. Bu kayıtlarda CPU zamanının olup olmadığı konusunda da bazı tartışmalar vardır. GitHub sorunlarıyla ilgili endişenizi net bir şekilde belirtin.

Daha fazla bilgi

Bu API henüz gönderilmiyor, ancak yakında gönderileceğini umuyoruz. Bu süre zarfında şunları okuyup yapabilirsiniz: