Geliştirici geri bildirimi gerekiyor - Frame Timing API

Paul Lewis
X Ana sayfa

Son birkaç yılda tarayıcılar, özellikle mobil cihazlarda oluşturma performansı açısından büyük ilerleme kaydetti. Daha önce, karmaşık olan her şey için akıcı bir kare hızı elde etme umudunuz yoktu. Ancak dikkatli olursanız bugün bu hedefe ulaşabilirsiniz.

Ancak çoğumuz için kendi cihazlarımızda makul bir şekilde test edebileceğimiz özellikler ile kullanıcılarımızın deneyimleri arasında bir bağlantı yoktur. 60 fps'de akıcı bir deneyim sunamazsanız kullanıcıların deneyimi olumsuz etkilenir ve sonuçta başka bir platforma geçerler. Bu da bizim için olumsuz bir durumdur. Bu nedenle, W3C'nin kullanıcılarımızın gördüğü içerikleri görmemize yardımcı olabilecek yeni bir API'den (Frame Timing API) bahsetmesi de çok iyi oldu.

Jake Archibald ile yakın zamanda API'ye genel bakış içeren bir video kaydettik. Okumak yerine izlemeyi tercih ediyorsanız göz atın:

Frame Timing API'nin kullanım alanları

Frame Timing API ile yapabileceğiniz çok sayıda işlem vardır. En önemlisi de sizin ve projeniz için önemli olanları ölçebilirsiniz. Yine de birkaç öneri verebiliriz:

  • JavaScript ve CSS animasyonlarınızın kare hızını izleme
  • Sayfa kaydırmalarınızın (veya belki de sonsuz kaydırma özelliğine sahip şık listenizin) ne kadar sorunsuz olduğunu izleme
  • Cihazın mevcut yüküne göre sahne efektlerinizi otomatik olarak küçültme.
  • Çalışma zamanı performans metrikleri için regresyon testi.

Asansör konuşması

API'nin şu anda spesifikasyondaki görünümü aşağıdaki gibidir: Bu API ile JavaScript, stiller ve düzenin çalıştığı oluşturucu iş parçacığı zamanlaması hakkında veri alabilirsiniz. (Oluşturucu iş parçacığının ana iş parçacığı olarak adlandırıldığını duymuş olabilirsiniz. Bu, farklı bir adla aynı şeydir.)

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

Aldığınız her oluşturma işleyici mesaj dizisi kaydı yaklaşık olarak şöyle görünür:

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

Her kayıt, temel olarak benzersiz bir kare numarası, karenin ne zaman başladığına dair bir yüksek çözünürlüklü zaman damgası ve ne kadar CPU süresi kullandığına dair başka bir zaman damgası içeren bir nesnedir. Bu dizi sayesinde startTime değerlerinin her birine bakabilir ve ana iş parçacığının 60 fps'de çalışıp çalışmadığını öğrenebilirsiniz. Diğer bir deyişle, "her karenin startTime değeri yaklaşık 16 ms'lik parçalar halinde mi artıyor?" sorusunu yanıtlayabilirsiniz.

Bununla birlikte, cpuTime değerini de alırsınız. Böylece, 16 ms sınırının içinde rahatça yer alıp almadığınızı veya sınıra yaklaşıp yaklaşmadığınızı bilirsiniz. cpuTime 16 ms sınırına yakınsa çöp toplama gibi işlemlerin devreye girmesi için fazla yer yoktur ve CPU kullanımı yüksek olduğunda pil tüketimi de artar.

Oluşturucu iş parçacığına ek olarak, boyama ve oluşturmanın gerçekleştiği oluşturucu iş parçacığı zamanlaması hakkında da veri alabilirsiniz:

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

Bunların her biri, ana iş parçacığının etkinliklerine bağlamak için kullanabileceğiniz bir kaynak çerçeve numarası ile de döndürülür:

{
    sourceFrameNumber: 120,
    startTime: 1352.343235321
}

Kompozitleme işleminin tarayıcılarda genellikle işleyiş şekli nedeniyle, oluşturucu iş parçacığı kaydı başına bu kayıtlardan birkaçı olabilir. Bu nedenle, bunları tekrar birbirine bağlamak için sourceFrameNumber öğesini kullanabilirsiniz. Bu kayıtlarda CPU süresinin de olup olmaması gerektiği konusunda da bazı tartışmalar var. Bu konudaki görüşlerinizi GitHub sorunlarında paylaşın.

Daha fazla bilgi

Bu API henüz kullanıma sunulmadı ancak yakında kullanıma sunulacaktır. Bu süre zarfında şunları okuyabilir ve yapabilirsiniz: