Progresif Web Uygulamaları, geliştiricilerin güvenilir ve yüksek performanslı kullanıcı deneyimleri sunan yeni bir uygulama sınıfı oluşturmasını sağlar. Ancak bir web uygulamasının istenen performans hedeflerine ulaşmasını sağlamak için geliştiricilerin yüksek çözünürlüklü performans ölçüm verilerine erişmesi gerekir. W3C Performans Zaman Çizelgesi spesifikasyonu, tarayıcıların alt düzey zamanlama verilerine programatik erişim sağlaması için böyle bir arayüz tanımlar. Bu, bazı ilginç kullanım alanlarına kapı açar:
- çevrimdışı ve özel performans analizi
- üçüncü taraf performans analizi ve görselleştirme araçları
- IDE'lere ve diğer geliştirici araçlarına entegre edilmiş performans değerlendirmesi
Bu tür zamanlama verilerine, gezinme zamanlaması, kaynak zamanlaması ve kullanıcı zamanlaması için çoğu büyük tarayıcıda zaten erişilebilir. En yeni eklenti, performans gözlemcisi arayüzüdür. Bu arayüz, temel olarak tarayıcı tarafından toplandığı için düşük düzey zamanlama bilgilerini eşzamansız olarak toplayan bir akış arayüzüdür. Bu yeni arayüz, zaman çizelgesine erişmek için kullanılan önceki yöntemlere kıyasla birçok önemli avantaj sağlar:
- Günümüzde uygulamaların, depolanan ölçümleri düzenli olarak sorgulaması ve karşılaştırması gerekiyor. Bu da maliyetli bir işlemdir. Bu arayüz, onlara geri arama olanağı sunar. (Diğer bir deyişle, ankete gerek yoktur). Sonuç olarak, bu API'yi kullanan uygulamalar daha duyarlı ve verimli olabilir.
- Tampon sınırlamalarına tabi değildir (çoğu tampon varsayılan olarak 150 öğeye ayarlanmıştır) ve tamponu değiştirmek isteyen farklı tüketiciler arasında yarış koşullarını önler.
- Performans gözlemci bildirimleri eşzamansız olarak yayınlanır ve tarayıcı, kritik oluşturma çalışmasıyla rekabet etmemek için bunları boş zamanlarda gönderebilir.
Chrome 52'den itibaren performans gözlemleyici arayüzü varsayılan olarak etkindir. Bu özelliği nasıl kullanacağınıza göz atalım.
<html>
<head>
<script>
var observer = new PerformanceObserver(list => {
list.getEntries().forEach(entry => {
// Display each reported measurement on console
if (console) {
console.log("Name: " + entry.name +
", Type: " + entry.entryType +
", Start: " + entry.startTime +
", Duration: " + entry.duration + "\n");
}
})
});
observer.observe({entryTypes: ['resource', 'mark', 'measure']});
performance.mark('registered-observer');
function clicked(elem) {
performance.measure('button clicked');
}
</script>
</head>
<body>
<button onclick="clicked(this)">Measure</button>
</body>
</html>
Bu basit sayfa, bazı JavaScript kodlarını tanımlayan bir komut dosyası etiketiyle başlar:
- Yeni bir
PerformanceObservernesnesini örneklendiririz ve nesne oluşturucuya bir etkinlik işleyici işlevi iletiriz. Oluşturucu, nesneyi ilk kullanıma hazırlar. Böylece, yeni bir ölçüm verisi kümesi işlenmek için hazır olduğunda işleyicimiz çağrılır (ölçüm verileri, nesne listesi olarak aktarılır). İşleyici burada, yalnızca konsolda biçimlendirilmiş ölçüm verilerini görüntüleyen anonim bir işlev olarak tanımlanır. Gerçek bir senaryoda bu veriler, daha sonra analiz edilmek üzere bulutta depolanabilir veya etkileşimli bir görselleştirme aracına aktarılabilir. - İlgilendiğimiz zamanlama etkinliği türlerine
observe()yöntemi aracılığıyla kaydoluyoruz ve kaydolduğumuz anı işaretlemek içinmark()yöntemini çağırıyoruz. Bu anı, zamanlama aralığımızın başlangıcı olarak kabul ederiz. - Sayfa gövdesinde tanımlanan bir düğme için tıklama işleyicisi tanımlarız. Bu tıklama işleyici, düğmenin ne zaman tıklandığıyla ilgili zamanlama verilerini yakalamak için
measure()yöntemini çağırır.
Sayfanın gövdesinde bir düğme tanımlar, tıklama işleyicimizi onclick etkinliğine atar ve çalışmaya hazır oluruz.
Şimdi sayfayı yükleyip JavaScript konsolunu izlemek için Chrome Geliştirici Araçları panelini açtığımızda, düğmeyi her tıkladığımızda bir performans ölçümü yapılır. Bu tür ölçümleri gözlemlemek üzere kayıtlı olduğumuz için bunlar, zaman çizelgesini yoklamaya gerek kalmadan eşzamansız olarak etkinlik işleyicimize yönlendirilir. Zaman çizelgesi, ölçümleri gerçekleştikleri anda konsolda gösterir:
start değeri, mark türündeki etkinlikler (bu uygulamanın yalnızca bir tanesi) için başlangıç zaman damgasını temsil eder. measure türündeki etkinliklerin doğal bir başlangıç zamanı yoktur. Bu etkinlikler, son mark etkinliğine göre alınan zamanlama ölçümlerini temsil eder. Bu nedenle, burada görülen süre değerleri, ortak bir aralık başlangıç noktası olarak hizmet veren mark() çağrısı ile measure() çağrısının ardından gelen birden fazla çağrı arasında geçen süreyi temsil eder.
Gördüğünüz gibi bu API son derece basittir ve anket yapmadan filtrelenmiş, yüksek çözünürlüklü ve gerçek zamanlı performans verileri toplama imkanı sunar. Bu da web uygulamaları için daha verimli performans araçlarının kapılarını açacaktır.