holodepth

Holodepth • Runtime Atlas • Rendering diagnostics

Frame Budget Visualizer

Event Loop zamanlamayı öğretir; Frame Budget hangi render aşamasının frame’i öldürdüğünü gösterir. Pipeline: JS → Style → Layout → Paint → Raster → Composite — Chrome Performance paneline yakın bir teşhis paneli.

Event Loop önce okunabilir · byteomi.com metin kaynağı

Holodepth köprüsü

Scheduling vs rendering diagnostics

Event Loop sayfası macrotask, microtask ve render fırsatını zamanlar. Frame Budget sayfası bir adım içeride: bir frame turunda hangi pipeline aşamasının 16,67 ms (60 Hz) bütçesini yediğini gösterir.

byteomi.com’da render pipeline metni vardır; burada amaç aynı kavramları stage lane’leri ve «killer stage» göstergesiyle okumaktır.

Pipeline nasıl okunur?

Hangi aşama frame’i öldürdü?

Üst şerit özet bar: tek frame’de toplam süre ve budget çizgisi. Alt şeritler her aşamayı ayrı gösterir — layout mu, paint mi, GPU raster mı sorularına cevap verir.

  • Frame budget şeridi. Renkli segmentler toplam süreyi gösterir; kesikli dikey çizgi 60 Hz’de ≈16,67 ms sınırıdır. Çizginin sağı kırmızıya dönerse budget overflow — frame geç kalır.
  • Aşama şeritleri. JS, Style, Layout, Paint ana thread; Raster (GPU) ayrı; Composite ve Compositor ayrı lane’lerde. En geniş blok o frame’de en pahalı aşamadır.
  • Killer stage. HUD’da en pahalı aşama yazar; altındaki Performance karşılığı kutusu o stage’i Chrome DevTools diline çevirir (long task, forced reflow, texture upload…). Budget aşılmadan killer «—» kalır.
  • Hover ve pause. Blok üzerinde süre ve açıklama çıkar; Pause + scrub ile tek frame’i inceleyin.
  1. JS — script ve DOM hazırlığı
  2. Style — computed style
  3. Layout — geometri
  4. Paint — görünür çizim
  5. Raster (GPU) — texture / piksel
  6. Composite — katman birleştirme

Killer stage ≠ Event Loop task. Burada ölçüm render pipeline aşamasıdır. «Layout pahalı mı?» sorusunun cevabı şerit genişliği + killer + aşağıdaki karşılık tablosudur.

  • JS Long task · sync computation
  • Style Style invalidation · selector churn
  • Layout Forced reflow · DOM ölçüm thrash
  • Paint Blur, shadow, gradient yoğunluğu
  • Raster Large texture upload · GPU tile cost
  • Composite Layer merge · backdrop-filter yığını
  • Compositor transform/opacity only · main thread bypass

Frame Budget Visualizer

PRESET: FRAME_BUDGET · rendering engineer

Byteomi runtime · CANLI · Render diagnostics

Stage lanes · 16.67 ms budget line · overflow red · killer stage · GPU raster lane · compositor lane.

Runtime note Simülasyon render pipeline maliyet dağılımını taklit eder. Amaç: layout mu pahalı, paint mi, GPU mu — tek bakışta görmek.

REC
Budget remaining 16.7 ms
Killer stage —
Frame total —
Performance karşılığı Budget içinde — stres toggle ile killer ve karşılık burada güncellenir.
JS Long task · sync computation
Style Invalidation cascade
Layout Forced reflow · thrash
Paint Blur, shadow, gradient
Raster Texture upload · GPU tile
Composite Layer merge stack
Compositor transform-only path

—

—

RENDER STRESS · FRAME_BUDGET

Tek toggle açın: killer stage + Performance karşılığı + vurgulu chip birlikte güncellenir. Layout thrash → Forced reflow; Raster upload → Texture upload.

Bu demo ne işe yarar?

Bu sayfadaki Frame Budget Visualizer, gerçek sitenizin trace’ini okumaz. Küçük bir öğretim modelidir: «16.67 ms içinde render pipeline’ın hangi aşaması bütçeyi yiyor?» sorusuna görsel cevap verir. Performance → Rendering sekmesindeki stage dağılımını tek bakışta öğretmek içindir.

Her frame yatay bir şerit: JS → Style → Layout → Paint → Raster → Composite → Compositor. Kesikli 16.67 ms çizgisi bütçe sınırıdır; taşan kısım kırmızı. Killer stage en pahalı aşamayı ve gerçek hayat karşılığını (forced reflow, texture upload vb.) üstte yazar.

Stres toggle’ları (Heavy JS, Layout thrash, Paint storm, Raster upload, Compositor-only) tek tek denendiğinde hangi bloğun uzadığını görürsünüz. Compositor-only: transform/opacity — main thread’e dokunmadan akış. Layout thrash: okuma-yazma döngüsü — layout bloğu şişer.

Nasıl kullanırsınız? Önce baseline frame’i izleyin; sonra bir toggle açın ve killer stage’in değişimine bakın. 120 Hz’e geçince bütçe 8.33 ms olur — aynı iş daha kolay taşar. Macro scheduling için önce Event Loop demosuna bakın; bu demo frame içindeki render maliyetini açar.

Kontroller ne yapıyor?

Heavy JS
JS şeridini uzatır — paint öncesi budget tüketir; killer bazen JS olur. Karşılık Long task · main thread dolu
Layout thrash
Layout’u tekrar tekrar tetikler — read/write döngüsü simülasyonu; killer genelde Layout. Karşılık Forced reflow · DOM ölçüm thrash
Paint storm
Paint + ek raster yükü — görünür alan ve efekt baskısı. Karşılık Blur/shadow/gradient · paint-bound
Large layer
Geniş katman — layout, raster ve composite sürelerini artırır. Karşılık Büyük layer · GPU tile + merge maliyeti
Raster upload
GPU texture upload — Raster (GPU) şeridi belirginleşir. Karşılık Large texture upload · GPU tile cost
Overdraw
Üst üste paint — paint şeridi ve raster maliyeti artar. Karşılık Overdraw · redundant paint passes
Compositor-only
Style/layout/paint atlanır; yalnızca compositor — hızlı ama stale riski. Karşılık Compositor thread · will-change / transform path

Okuma ipucu: Önce killer stage’e bakın, hemen altındaki turuncu «Performance karşılığı» satırı hangi optimizasyonu düşüneceğinizi söyler; referans chip’lerden biri vurgulanır.

Ne görmelisiniz?

Sağlıklı frame

  • Toplam süre budget çizgisinin solunda
  • Tüm stage blokları kısa
  • Killer stage: —

Layout bound

  • Layout şeridi en geniş
  • Killer: Layout
  • Thrashing toggle ile reproduce

GPU / paint bound

  • Raster veya Paint dominant
  • Budget overflow kırmızı
  • Paint storm + raster upload

Gerçek hayat karşılığı

  • Liste scroll jank. Sürekli layout + paint — Layout/Paint killer. Layout thrash + Paint storm.
  • Büyük hero görseli. Raster upload spike — Raster upload + Large layer.
  • CSS transform scroll. Compositor-only akıcı — Compositor-only; layout şeridi boş kalır.

Özet ve sıra

Runtime Atlas sırası: Event Loop → Frame Budget → Browser Topology → V8 JIT → Layout Thrashing.