Arka Plan Throttle Çözümü — Ekran Kapanan Cihazlar

1Sorun Nedir?

Herkes İçin

Kullanıcı telefonu cebine koyuyor, müzik dinliyor. 40 dakika sonra ekrana bakıyor. O anda ekran 2-3 saniye donuyor, hiçbir butona basılamıyor. Kullanıcı "donuyor" diyor.

Aslında müzik hiç durmamış. Donma sadece ekrandaki görsel arayüzde. Bunun sebebi Chrome'un "pil tasarrufu" özelliği — arka plandaki sekmelerin işlem gücünü kısıyor, öne gelince birikmiş işleri bir anda yapıyor.

Teknik Detay — Chrome Throttle Mekanizması

Ön Planda (Normal)

setTimeout / setInterval	İstediğin süre
requestAnimationFrame	~16ms (60fps)
JS execution	Sürekli çalışır
Audio playback	Normal

Arka Planda (Throttled)

setTimeout / setInterval	Minimum 1000ms
requestAnimationFrame	Tamamen durur
JS execution	Birikir → öne gelince patlar
Audio playback	Etkilenmez ✓

2Gerçek Olayın Zaman Çizelgesi

test@muzibu.com kullanıcısının 103 dakikalık oturumunda ne oldu:

97 dk

Arka Planda (103dk'nın %94'ü)

6 dk

Ön Planda

20

PROC-HOLD (hepsi dönüşte)

🎵

19:44 — Kullanıcı müzik başlattı

Playlist açıldı, autoplay başladı. Her şey normal.

↓

📱

19:45 — Telefon cebe girdi

Ekran kapandı / başka uygulama açıldı. Chrome sekmeyi "arka plan" moduna aldı. Müzik çalmaya devam etti. Debug timer'ları arka planda 1sn'ye throttle edildi.

↓ 60 dakika geçti...

👀

20:46 — Bir an baktı (5 saniye)

Kısa bir göz attı, ekran normal görünüyordu. Tekrar cebe koydu.

↓ 40 dakika daha geçti...

💥

21:26:52 — Ekrana döndü → BURST

Chrome 40 dakikada birikmiş tüm deferred işlemleri aynı anda çalıştırdı. Debug sistemi saniyede 50+ callback aldı. Ana thread 2-3 saniye bloke oldu. Kullanıcı "donuyor" dedi.

↓

📤

21:27:11-23 — "Raporu Gönder" × 3 tıklama

Kullanıcı hızlıca 3 kez butona bastı. Cooldown yoktu (şimdi 60sn cooldown eklendi).

3Neyi Etkiliyor, Neyi Etkilemiyor?

Etkilenen (Donma Hissedilen)

🖥️

Ekran / Arayüz

Butonlara basılamaz, scroll donuk, panel güncellenmez

📊

Debug Panel Metrikleri

collectMetrics, updatePanel, jank detection timer'ları birikir

⏱️

JavaScript Timer'ları

setTimeout, setInterval, requestAnimationFrame hepsi throttle

📡

Ağ İstekleri (kısmen)

fetch/XHR çalışır ama öncelik düşer, sıraya girer

Etkilenmeyen (Normal Çalışan)

🔊

Ses Çalma (Audio Playback)

HTML5 Audio / Howler.js arka planda çalmaya devam eder

⏭️

Şarkı Geçişleri (autoplay)

Howler onend event'i çalışır, sonraki şarkıya geçer

🌐

Web Worker'lar

Worker thread'leri throttle'dan muaf — arka planda tam hız

🔔

Service Worker / Push

Bağımsız process, sekme throttle'ından etkilenmez

43 Katmanlı Çözüm Planı

Her katman bağımsız çalışır. Katman 1 tek başına sorunu %90 çözer.

KATMAN 1

Arka Planda Debug'ı Durdur

%90 etkili · Kolay

Ne Yapılacak?

Kullanıcı ekranı kapattığında veya başka uygulamaya geçtiğinde debug sistemi kendini "uyku moduna" alacak. Tüm timer'lar (panel güncelleme, metrik toplama, jank algılama) duracak. Ekrana geri dönüldüğünde kademeli olarak uyanacak — hepsi bir anda değil, sırayla. Böylece Chrome'un "birikmiş iş patlaması" hiç olmayacak.

Şu Anki Davranış (Sorunlu)

// Sekme arka plana gidiyor
// Timer'lar çalışmaya devam ediyor:
collectMetrics()  → her 1sn (throttle: 1sn)
updatePanel()     → her 1sn (throttle: 1sn)
jankDetection()   → her 100ms (throttle: 1sn)
memoryTimeline()  → her 5sn (throttle: 5sn)
bwSampling()      → her 5sn (throttle: 5sn)

// 40 dakika sonra öne gelince:
💥 2400 birikmiş callback → BURST
💥 Ana thread 2-3sn bloke
💥 20 PROC-HOLD

Yeni Davranış (Çözüm)

// Sekme arka plana gidiyor
visibilitychange → 'hidden'
  → Tüm timer'lar DURDURULDU
  → Son durum kaydedildi
  → "bgStartTime" not edildi

// 40 dakika sonra öne gelince:
visibilitychange → 'visible'
  +0ms    → Sadece "arka plandaydım" log
  +500ms  → collectMetrics başlat
  +1000ms → updatePanel başlat
  +2000ms → jankDetection başlat
  +3000ms → Tam operasyon
✅ 0 birikmiş callback → 0 PROC-HOLD

KATMAN 2

Dönüş Sonrası Grace Period

Güvenlik ağı · Kolay

Ne Yapılacak?

Katman 1 çalışsa bile, Chrome'un kendi iç mekanizmaları (layout, paint, style recalc) öne gelince biraz yoğunluk yaratabilir. Bu yüzden arka plandan döndükten sonra 5 saniye boyunca PROC-HOLD algılama kapalı tutulacak. Bu sürede oluşan gecikmeler sayılmayacak ve rapora yazılmayacak. Böylece yanlış alarm (false positive) sıfırlanır.

⏸️

0-5 saniye

PROC-HOLD algılama KAPALI

Chrome burst'ını sessizce yutuyoruz

🔄

5-10 saniye

PROC-HOLD eşiği yüksek (500ms)

Sadece ciddi olanlar raporlanır

✅

10+ saniye

Normal mod (100ms eşik)

Artık gerçek PROC-HOLD'lar algılanır

KATMAN 3

Web Worker ile Arka Plan İzleme (Opsiyonel)

Gelişmiş · Büyük refactor

Ne Yapılacak?

Eğer arka planda da metrik toplamak istiyorsak (kullanıcı ekrana bakmasa bile bellek, ağ durumu vs. kayıt altına almak), bu işi ayrı bir "Worker" thread'ine taşıyabiliriz. Worker'lar Chrome throttle'ından etkilenmez — arka planda bile tam hızla çalışır. Ana thread'e hiç yük bindirmez.

Ama: Bu büyük bir mimari değişiklik. Katman 1+2 sorunu zaten çözüyor. Bu katman sadece "arka planda da veri toplama" ihtiyacı varsa gerekli.

5Beklenen Sonuç

Katman 1+2 uygulandıktan sonra aynı senaryo nasıl görünecek:

Şu An (v2 rapordaki kullanıcı)

PROC-HOLD	20 olay
JANK	5281 olay
Tanılama	SEV-1 KRİTİK
Kullanıcı deneyimi	Ekran 2-3sn donuk
Müşteri şikayeti	"Donuyor"

Katman 1+2 Sonrası (Beklenen)

PROC-HOLD	0 olay
JANK	~50 olay (gerçek)
Tanılama	ALL-CLEAR
Kullanıcı deneyimi	Anlık geçiş
Müşteri şikayeti	Yok

6Değişecek Dosyalar

Dosya	Katman	Değişiklik	Satır
performance-debug.js	K1	visibilitychange listener: hidden→timer stop, visible→kademeli başlat	~1500-1520
performance-debug.js	K1	collectMetrics(), updatePanel() — clearInterval / setInterval toggle	~1180, ~3200
performance-debug.js	K2	PROC-HOLD algılama: visShowTimestamp + grace period kontrolü	~1340-1360
performance-debug.js	K2	JANK algılama: arka plan dönüşünde 5sn suppress	~1330
performance-debug.js	K1	generateReport(): arka plan süresini raporda göster	~1700

Not: Katman 3 (Web Worker) bu aşamada yapılmayacak. Katman 1+2 yeterli. player-core.js'e dokunulmuyor — ses çalma mekanizması zaten arka planda düzgün çalışıyor.