PerformanceObserver

PerformanceObserver ile performans girdilerini nasıl gözlemleyeceğini öğrenirsin.

PerformanceObserver

PerformanceObserver modern tarayıcılarda performans girdilerini (performance entries) toplar. performance.now ile tek tek ölçüm yapmak yerine, tarayıcının ürettiği hazır ölçümleri dinlersin. Boyama zamanları (paint), kaynak yükleme süreleri (resource) ve kullanıcı zamanlaması (mark, measure) gibi birçok tür vardır.

Önce bir callback yazarsın; callback bir list alır ve list.getEntries() ile girdileri dolaşırsın. Sonra new PerformanceObserver(callback) ile gözlemciyi oluşturur, observer.observe({ entryTypes: [...] }) ile hangi türleri dinleyeceğini söylersin. İşin bitince disconnect çağırırsın.

buffered, takeRecords ve disconnect

PerformanceObserver birkaç ek olanak daha sunar. observe çağrısına buffered: true eklersen, sayfa açıldığından beri biriken eski girdiler de gelir; böylece geç kalıp önemli verileri kaçırmazsın.

Callback dışında bir anda elimizdeki girdileri almak istersen takeRecords metodunu çağırırsın; bekleyen tüm girdileri döndürür ve sırayı temizler. Gözlemi bitirmek için observer.disconnect() yeterlidir; bellek sızıntısını önler ve sayfa kapansa bile temiz kalır.

Uygulama Paint girdilerini izle

Bir PerformanceObserver oluştur. Callback list alır; her entry için entry.name'i konsola yaz. entryTypes olarak 'paint' ver ve observe ile başlat.

Örnek çözümü göster

1. new PerformanceObserver((list) => {...}) ile oluştur.
2. Callback içinde list.getEntries() ile her entry'yi dolaş ve entry.name'i yazdır.
3. observer.observe({ entryTypes: ['paint'] }) ile başlat.

Örnek çözüm:
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name);
  }
});
observer.observe({ entryTypes: ['paint'] });

Kendini test et

PerformanceObserver'ın observe metoduna verilen entryTypes neyi belirler?
- Gözlemcinin adını
- Hangi tür performans girdilerinin izleneceğini
- Callback'in kaç kez çağrılacağını
- Gözlemcinin ne zaman disconnect edileceğini
Cevabı göster

Hangi tür performans girdilerinin izleneceğini — Doğru. entryTypes dizisi, paint, resource veya measure gibi hangi girdi türlerinin dinleneceğini söyler.

entryTypes dizisini ekle

observer.observe({ entryTypes:____});

Cevabı göster

observer.observe({ entryTypes:['paint']});

PerformanceEntry alanlarını eşleştir

name

Girdi adı
entryType

Girdi türü
startTime

Başlangıç zamanı
duration

Süre

Sıradaki ders: ResizeObserver derinlemesine

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler