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:
- Repo'daki açıklama dokümanlarını okuyun. Anlamlı olması için kare verilerini en iyi şekilde nasıl kaydetmeniz gerektiğiyle ilgili birçok nüans vardır. Açıklayıcı makalede bu konuda bazı yönergeler verilmiştir.
- Spesifikasyonun en son taslağına göz atın. Oldukça kısa olan bu taslağı okumanızı öneririz.
- Eksik özellikler veya olası sorunlarla ilgili sorunları bildirin. Neleri ölçmek istediğinizi biliyorsunuz. Bu nedenle, API ile yapmak istediğiniz ancak yapamadığınız bir şey olduğunu düşünüyorsanız lütfen geri bildirimde bulunun.