Özet - Gözlemciler ve kanallar

JavaScript kursu · Uzman · Ders 18/63

PerformanceObserver ve BroadcastChannel ile çok sekmeli bir metrik toplama demosu yazarsın.

Özet - Gözlemciler ve kanallar

Bu grupta modern gözlem ve kanal API'lerini öğrendin:

PerformanceObserver: performans girdilerini toplar
ResizeObserver: öğe boyut değişimini bildirir, contentBoxSize ve borderBoxSize verir
ReportingObserver: tarayıcı raporlarını (deprecation, intervention) yakalar
BroadcastChannel: aynı kökenli sekmeler arası mesaj taşır
MessageChannel: iki port arası birebir kanal kurar

Hepsinin ortak yanı, callback tabanlı olmaları ve observer'larında observe ile başlayıp disconnect ile bitmesidir.

Uygulama Resource girdilerini izle

Bir PerformanceObserver oluştur. Callback list alır; her entry için entry.entryType'ı konsola yaz. entryTypes olarak 'resource' 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.entryType'ı yazdır.
3. observer.observe({ entryTypes: ['resource'] }) ile başlat.

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

Hangi API ne zaman?

Hangi API'yi seçeceğin ihtiyacına bağlıdır:

Sayfa hızını ölçmek istiyorsan PerformanceObserver
Bir öğenin mizanpaj değişimine tepki vermek istiyorsan ResizeObserver
Tarayıcı uyarılarını toplamak istiyorsan ReportingObserver
Sekmeler arası anlık mesaj lazımsa BroadcastChannel
İki belirli uç arasında özel kanal lazımsa MessageChannel

Yanlış API seçmek karmaşıklığa yol açar; doğru seçim ise az kodla çok şey yapar.

Uygulama logs kanalında mesaj dinle

'logs' adında bir BroadcastChannel oluştur. onmessage ile gelen mesajın event.data'sını konsola yaz.

Örnek çözümü göster

1. const channel = new BroadcastChannel('logs') ile kanalı oluştur.
2. channel.onmessage = (event) => console.log(event.data) ile dinle.

Örnek çözüm:
const channel = new BroadcastChannel('logs');
channel.onmessage = (event) => {
  console.log(event.data);
};

Kendini test et

Aynı kökenli sekmeler arası mesajlaşma için hangi API en uygundur?
- BroadcastChannel
- MessageChannel
- ResizeObserver
- ReportingObserver
Cevabı göster

BroadcastChannel — Doğru. BroadcastChannel aynı kökenli sekmeler arası mesajlaşma için tasarlanmıştır.
API'leri kullanım alanıyla eşleştir

PerformanceObserver

Zamanlama ölçümleri
ResizeObserver

Boyut değişimi
BroadcastChannel

Sekmeler arası mesaj
MessageChannel

Porttan porta mesaj

Uzman bölümündeki tüm dersler

Özet - Gözlemciler ve kanallar