Event Loop Sistemi

byteomi.com Tarayıcı Mimarisi serisinde call stack, task queue, microtask, rendering sync ve async davranışı metinsel olarak işlenir. Bu sayfa aynı konuyu tekrar anlatmaz — canlı timeline ile göz eğitimi ve tracing okuma pratiği sunar.

Aşağıdaki bölümler yalnızca simülatör panelini ve Holodepth Runtime Atlas modelini açıklar.

Aşağıdaki panel, Chrome DevTools Performance veya Apple Instruments timeline’ına benzer okunur. Önce bu kuralları gözünüzde canlandırın; ardından simülatöre geçip aynı desenleri arayın.

• Soldaki her satır. Her yatay şerit tek bir runtime fazına aittir: main thread, microtask, input, rAF, render, idle, VSync, compositor ve GC. Bir sorunu teşhis ederken önce hangi şeritte uzama olduğuna bakın — sorun JS mi, render mı, compositor mu hemen daralır.
• Zaman soldan sağa akar. Yeni olaylar sağa doğru eklenir; geçmiş sol tarafta kalır. Panelde «Pause» ile dondurup «Timeline scrub» ile geçmiş bir frame’e gidin; o anki blok dizilimini rahatça inceleyin.
• Her blok bir süre. Renkli dikdörtgen, o fazda harcanan milisaniyeyi gösterir — geniş blok yavaş iş, ince blok hızlı iş demektir. İki bloğu yan yana kıyaslayarak hangi adımın budget’ı yediğini görün.
• Dikey çizgiler frame sınırı. Her tur VSync’ta ince bir çizgi belirir. drop budget ciddi aşımı, late gecikmiş tur, skip render fırsatının kaçırıldığını işaret eder — etiket rengine güvenerek «iyi frame / kötü frame» ayrımı yapın.
• Arka plan ısısı (frame heat). Turuncu ve kırmızı bantlar o frame’de ana thread’in ne kadar sıkıştığını gösterir. Main thread’de kırmızı glow’lu geniş blok görürseniz long task (>50 ms) vardır; tıklama ve scroll bu frame’de gecikebilir.
• Üstteki FPS sparkline. Anlık hız eğrisini verir; düşüş veya dalgalanma arayın. Önemli: Sparkline yüksek olsa bile render şeridi boşsa ekran güncellenmiyor olabilir — microtask spam ile bu yanıltıcı tabloyu bilinçli test edin.
• Hover ile öğrenme. İmleci bir bloğun üzerine getirin; süre, faz adı ve kısa Türkçe açıklama açılır. Satır isimlerini ezberlemek yerine timeline üzerinde gezinerek «bu renk ne anlama geliyor?» sorusunu anında yanıtlayın.
• Phase + DevTools karşılığı. HUD’daki Phase aktif schedule fazını gösterir; altındaki mor «DevTools karşılığı» kutusu task queue, microtask drain, rendering opportunity gibi terimlere çevirir. Render şeridi içindeki layout/paint ayrımı için Frame Budget sayfasına bakın.

Event Loop ≠ render pipeline. Bu preset zamanlamayı öğretir; «hangi queue render’ı geciktirdi?» sorusunun cevabı lane + Phase + aşağıdaki tablodur.

• Main thread Long task · sync JS · macrotask callback
• Microtask Promise chain · queueMicrotask · await devamı
• Input Pointer/keyboard dispatch · INP öncesi gecikme
• rAF requestAnimationFrame · paint öncesi hook
• Render Rendering opportunity · style→layout→paint sync
• Idle requestIdleCallback · düşük öncelikli arka plan
• VSync Display refresh · drop / late / skip işaretleri
• Compositor Off-main scroll/transform · stale frame riski
• GC pause Stop-the-world collection · ana thread kesintisi

İlk deneme önerisi: Önce tüm kontroller kapalıyken 10 saniye izleyin; sonra yalnızca Microtask spam açın — mor şeridin uzayıp render’ın kaybolduğunu aynı panelde doğrulayın.

Simülatör her frame turunda kabaca şu sırayı üretir. Timeline’da bazen adımlar üst üste biner veya jitter ile kayar — gerçek motor da mükemmel hizalı değildir.

1. Macrotask çalışır (timer, click, I/O callback).
2. Microtask queue tamamen boşalır — Promise / await devamı.
3. requestAnimationFrame callback’i paint öncesine hizalanır; gecikmişse rAF (late) görürsünüz.
4. Render fırsatı oluşursa style → layout → paint → composite adımları render şeridine yazılır; budget dolmuşsa render skipped.
5. Idle callback (varsa) boş aralıkta kısa süre çalışır.
6. Compositor scroll/transform günceller; layout atlanırsa stale frame mümkündür.
7. VSync frame sınırı — drop / late / düzenli tik.

Neden microtask render’ı bloklar? Microtask fazı bitmeden yeni macrotask ve rendering opportunity gelmez. Spam açıkken mor şerit uzar, render şeridi boş kalır — FPS sparkline yüksek olsa bile ekran güncellenmeyebilir.

JS load

Main thread’de senkron iş yükünü artırır. Uzun süre → long task glow, kırmızı frame heat, drop / late. Karşılık Long task · main thread blocked

Microtask spam

Promise zinciri benzeri ardışık microtask üretir. Render fırsatını geciktirir veya atlar — «yüksek FPS, güncellenmeyen ekran» senaryosu. Karşılık Microtask queue drain · render starvation

Heavy layout

Render şeridinde layout süresini uzatır; frame budget’ı hızla tüketir. Karşılık Rendering sync · forced reflow (detay: Frame Budget)

Paint storm

Paint + raster bloklarını şişirir; texture upload baskısı — turuncu/kırmızı heat. Karşılık Paint/raster pressure · paint-bound

Compositor-only

Layout/paint atlanır; yalnızca compositor güncellenir. Hızlı scroll hissi — içerik stale kalabilir. Karşılık Compositor thread · transform-only path

GC pause

V8 stop-the-world benzeri kısa duraklama — mor GC şeridinde ana thread kesintisi. Karşılık GC pause · stop-the-world · jank spike

60 Hz / 120 Hz

Frame budget hedefini değiştirir (≈16,67 ms vs ≈8,33 ms). Aynı JS yükü 120 Hz’de daha kolay drop üretir. Karşılık VSync budget · daha sık frame sınırı

Okuma ipucu: Önce hangi şerit uzadığına bakın (lane), sonra Phase ve DevTools karşılığı hangi queue/fazın suçlu olduğunu söyler. Layout/paint milisaniye ayrımı Frame Budget preset’indedir.

Akademik tanımlar sahada his olarak farklı gelir. Aşağıda her senaryoyu ürün deneyimi, timeline deseni ve simülatörde hangi anahtarları açmanız gerektiğiyle eşleştiriyoruz — önce okuyun, sonra panelde aynı deseni arayın.

• Sonsuz feed scroll «jank». Kullanıcı kaydırırken içerik «takılar», görseller geç gelir. Genelde layout + paint baskısı vardır: render şeridinde geniş layout/paint blokları, frame heat turuncuya döner, VSync’ta sık late görürsünüz. Simülatörde Heavy layout ve Paint storm’u birlikte açın; scroll sırasında render lane’in uzadığını izleyin.
• React / state «infinite rerender». Arayüz güncelleniyor gibi hissedilir ama ekran donuk kalabilir — microtask seli ve orta JS yükü render fırsatını yutar. Timeline’da mor microtask şeridi uzar, render skipped veya boş render lane belirir; FPS sparkline yüksek olsa bile güvenmeyin. Deneme: Microtask spam + JS load ~%40–50.
• Mobil cihaz donması. Dokunma veya scroll’a geç cevap; uygulama «kilitlenmiş» gibi. Ana thread’de uzun kırmızı glow (long task) ve VSync’ta drop tipik. Zayıf cihazda 120 Hz hedefi budget’ı daha da daraltır. Simülatörde JS load’u yükseltin veya 120 Hz seçin; kırmızı glow + drop etiketini birlikte arayın.
• Parallax / transform-only scroll. Kaydırma akıcı görünür çünkü çoğu hareket compositor’da — layout/paint atlanır. Risk: içerik güncellenmeden eski kare (stale frame) gösterilebilir. Yalnızca Compositor-only açın; compositor şeridinde scroll, ara sıra stale işaretini doğrulayın.
• Tab arka planda GC takılması. Sekme geri gelince kısa takılma veya gecikmeli tepki; V8 GC ana thread’i anlık durdurur. Mor GC şeridinde ince pause + macrotask gecikmesi görülür. GC pause ve orta JS load ile arka plandaki «takılma» hissini timeline üzerinde canlandırın.

Pratik alıştırma: Bir senaryoyu seçin, ilgili kontrolleri açın, Pause ile dondurun — timeline’daki desen ile kullanıcı şikâyetini yan yana eşleştirin. Teori için byteomi.com Event Loop sayfasına dönün; Holodepth’te amaç aynı kavramları panelde tanımaktır.