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 web uygulamasının istenen performans hedeflerine ulaştığından emin olmak için geliştiricilerin yüksek çözünürlüklü performans ölçümü verilerine erişmesi gerekir. W3C Performans Zaman Çizelgesi spesifikasyonu, düşük seviyeli zamanlama verilerine programatik erişim sağlamak için tarayıcıların bu tür bir arayüzü tanımlar. Bu, bazı ilginç kullanım alanlarının kapısını 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, çoğu ana tarayıcıda gezinme zamanlaması, kaynak zamanlaması ve kullanıcı zamanlaması için erişilebilir. En yeni ekleme, temelde düşük zamanlama bilgilerini eşzamansız olarak toplamak için kullanılan bir akış arayüzü olan performans gözlemleyici arayüzüdür. Bu yeni arayüz, zaman çizelgesine erişmek için önceki yöntemlere kıyasla birtakım kritik avantajlar sunar:
- Günümüzde uygulamalar, depolanan ölçümleri düzenli aralıklarla sorgulamak ve farklılaştırmak zorunda kalıyor. Bu da çok maliyetli. Bu arayüz kullanıcıların geri çağırmasını sağlar. (Başka bir deyişle, anket yapmaya gerek yoktur). Sonuç olarak, bu API'yi kullanan uygulamalar daha duyarlı ve verimli olabilir.
- Tampon sınırlarına tabi değildir (çoğu tampon, varsayılan olarak 150 öğeye ayarlanır) ve tamponu değiştirmek isteyebilecek farklı tüketiciler arasındaki yarış koşullarından kaçınır.
- Performans gözlemleyicisi bildirimleri eşzamansız olarak gönderilir ve tarayıcı, kritik oluşturma işleriyle rekabet etmekten kaçınmak için boşta kalma süresinde bunları dağıtabilir.
Chrome 52'den itibaren performans gözlemleyici arayüzü varsayılan olarak etkindir. Şimdi bunu nasıl kullanabileceğimize bakalı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
PerformanceObservernesnesi örneklenir ve nesne oluşturucuya bir etkinlik işleyici işlevi iletiriz. Oluşturucu, yeni bir ölçüm verisi kümesi işlenmeye hazır olduğunda (nesne listesi olarak iletilen ölçüm verileriyle birlikte) her defasında işleyicimiz çağrılacak şekilde nesneyi başlatır. İşleyici, burada biçimlendirilmiş ölçüm verilerini konsolda gösteren 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 dönüştürülebilir. - İlgilendiğimiz zamanlama etkinliği türleri için
observe()yöntemiyle kaydolur ve kayıt yaptığımız anı işaretlemek içinmark()yöntemini çağırırız. Bunu zamanlama aralıklarımızın başlangıcı olarak değerlendiririz. - Sayfa gövdesinde tanımlanan bir düğme için tıklama işleyici 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ımlıyor, tıklama işleyicimizi onclick etkinliğine atıyoruz ve başlamaya hazırız.
Artık sayfayı yükleyip Chrome Geliştirici Araçları panelini açarak JavaScript konsolunu izlediğimizde, düğmeyi her tıkladığımızda bir performans ölçümü yapılır. Bu tür ölçümleri gözlemlemek için kaydolduğumuzdan, zaman çizelgesini sorgulamaya gerek kalmadan eşzamansız olarak etkinlik işleyicimize yönlendirilirler. Bu sırada, ölçümler meydana geldikçe konsolda görüntülenir:
start değeri, mark türündeki (bu uygulamada yalnızca bir tane) etkinliklerin başlangıç zaman damgasını temsil eder. measure türündeki etkinliklerin doğal başlangıç zamanı yoktur; bunlar, son mark etkinliğine göre alınan zamanlama ölçümlerini temsil eder. Dolayısıyla, burada görülen süre değerleri, ortak aralıklı başlangıç noktası görevi gören mark() çağrısı ile measure() için sonraki birden çok çağrı arasında geçen süreyi temsil eder.
Gördüğünüz gibi bu API son derece basittir ve filtrelenmiş, yüksek çözünürlüklü, gerçek zamanlı performans verilerini yoklamadan toplama olanağı sunar. Bu da web uygulamaları için daha etkili performans araçlarının kapısını açacaktır.