holodepth

Holodepth • Runtime Atlas • Rendering stress

Layout Thrashing Simulator

CPU + browser pipeline stress reactor: write/read invalidation döngüsünde forced synchronization catastrophe. JS → Style → Layout → Paint → Composite → GPU — amber/red thermal stress, dirty flags ve frame timeline.

Frame Budget · V8 JIT

Holodepth köprüsü

Frame Budget tek frame’de hangi aşamanın bütçeyi yediğini gösterir. Layout Thrashing neden layout aşamasının patladığını gösterir: DOM’a yazıp hemen geometri okumak (offsetWidth, getBoundingClientRect) ana thread’i zorlar.

Client-side simülasyon — gerçek sayfanızı ölçmez. Amaç: read/write invalidation loop ve SYNC FLUSH hissini «kutu diyagramı» değil, pipeline stress reactor ile yaşatmak.

Stress reactor nasıl okunur?

Forced sync · dirty flags · 16.67 ms frame budget

Frame Budget bir frame’de hangi aşamanın süreyi yediğini ölçer; Stress Reactor neden layout’ın patladığını gösterir. Sorun genelde «çok fazla layout» değil — write ile read’in iç içe geçmesidir: el.style.width = … yazıp hemen el.offsetWidth okumak tarayıcıyı her seferinde zorla senkronize etmeye (forced reflow) iter.

Sahne bir render pipeline değil, CPU + browser stress reactor: her aşama bir chamber, aralarında akan noktalar DOM’a yazma/okuma paketleridir. Normalde akış yeşilimsi ve sakin; thrash başlayınca Layout chamber kızar, conduit’lerde BLOCK görünür, SYNC FLUSH patlar ve 16.67 ms bütçe taşar.

  • Normal flow vs thrashing. Safe Writes modunda paketler batch halinde akar, dirty flag’ler söner, FPS ~60, budget meter yeşil-bakır. Thrash Loop veya Force Reflow ile write→read döngüsü: Layout tekrar tekrar çalışır, timeline’da üst üste kırmızı layout sütunları, main thread bar dolar, FPS düşer.
  • HUD, dirty flags ve log. Üst şerit: FPS, frame ms, budget (OK / OVERFLOW), reflow ve dropped frame sayıları. STYLE / LAYOUT / PAINT DIRTY badge’leri invalidation’ı gösterir — read layout yapınca hepsi yanabilir. Sağ Runtime log gerçek engine diline yakın satırlar yazar (offsetWidth between writes, FORCED REFLOW).
  • Alt bölümler (tek canvas). Reactor üstte; altında Frame timeline (mini DevTools — her frame’de JS | Style | Layout | Paint | Composite); en altta Main thread saturation bar. Dar ekranda log üstte, pipeline yatay kaydırılabilir.
  • A11y modları. Reduced motion (sistem tercihi + toggle), High contrast, Colorblind safe — thermal copper dili korunur, okunabilirlik artar.

Soldan sağa · ana thread render pipeline

  • JS
  • STYLE
  • LAYOUT
  • PAINT
  • COMPOSITE
  • GPU
  • JS · STYLE. Script çalışır, stil hesaplanır. Thrash genelde burada başlar: her property değişimi style dirty; henüz layout okunmadıysa batch’lenebilir.
  • LAYOUT (yıldız bölüm). Geometri hesabı — en pahalı tekrarlayan aşama. Forced read burada SYNC LOCK halkası ve SYNC FLUSH metni ile gösterilir; chamber jitter + dual ring «engine pressure» verir.
  • PAINT · COMPOSITE · GPU. Piksel üretimi ve katman birleştirme; GPU’ya raster. Thrash sonrası paint de sık sık tetiklenir çünkü layout her değişimde ağacı yeniden boyar.
  • GPU Only (karşılaştırma). transform / opacity ile layout atlanır — pipeline JS → Composite → GPU olarak kısalır; STYLE/LAYOUT/PAINT chamber’ları «bypass» soluk görünür. Scroll performansı için altın kural bu yüzden öğretilir.

Öğrenme sırası: Safe Writes (sakin baseline) → Read Layout (tek forced sync) → Thrash Loop (felaket) → GPU Only (çözüm yolu). Budget meter taşmamalı — overflow olduğunda bar dolu kalır, dış glow ile taşma hissedilir (container dışına taşmaz).

Pipeline Stress Reactor

PRESET: LAYOUT_THRASH · thermal stress

Byteomi runtime · CANLI · Stress reactor

Reactor chambers · dirty flags · blocking beam · 16.67ms budget meter · FPS collapse · frame timeline · main thread saturation.

Runtime note Simülasyon — gerçek layout ölçümü değil. Thrash/forced reflow davranışı öğretim amaçlıdır.

LIVE Mode Normal flow
A11y
FPS 60
Frame 12.0 ms
Budget OK
Reflows 0
Dropped 0
STYLE DIRTY LAYOUT DIRTY PAINT DIRTY
Reactor insight Batched writes + rAF — pipeline stabil.

Reactor · timeline · main thread · dar ekranda yatay kaydır

STRESS REACTOR · LAYOUT_THRASH

Önerilen: Safe Writes (yeşil akış) → Thrash Loop veya Force Reflow (kırmızı layout, SYNC FLUSH, FPS düşüşü) → GPU Only (kısa pipeline karşılaştırması).

Bu demo ne işe yarar? (basit özet)

Bu sayfadaki Stress Reactor, tarayıcınızda gerçek bir sayfayı ölçmez ve DevTools’a bağlanmaz. Bilgisayarınızda çalışan küçük bir öğretim modelidir: «DOM’a yazdıktan hemen sonra geometri okursam neden kasılır?» sorusuna görsel cevap verir. Klasik örnek: box.style.width = "200px"; box.offsetWidth; box.style.height = "300px";

Normalde tarayıcı stil değişikliklerini toplu işler (batch) ve bir sonraki frame’de layout hesaplar — bu akış sakin, yeşilimsi pipeline ve ~60 FPS demektir. Sorun, araya layout read (offsetWidth, getBoundingClientRect…) girdiğinde oluşur: motor «henüz hesaplamadım, hemen hesapla» der — buna forced synchronization veya forced reflow denir. Demo bunu LAYOUT chamber’da SYNC LOCK + SYNC FLUSH ile gösterir.

Thrash modunda aynı frame içinde defalarca write→read döngüsü çalışır: timeline’da üst üste layout sütunları, main thread bar’ın dolması, FPS’in 60’tan aşağı düşmesi ve sağ üstteki 16.67 ms budget meter’ın taşması (bar dolu kalır, dış glow ile overflow hissi). Yukarıdaki §5 kartları «normal / thrash / GPU only» karşılaştırmasını özetler.

Dirty flags (STYLE / LAYOUT / PAINT badge’leri) hangi aşamaların invalidation beklediğini gösterir. Read yapınca hepsi yanabilir — çünkü okuma, bekleyen layout’u zorla flush eder. GPU Only ise çözüm yolunu hatırlatır: transform ve opacity ile layout atlanır, pipeline kısalır.

Butonlar ne yapar? Safe Writes sakin baseline; Read Layout tek bir forced sync; Thrash Loop / Force Reflow felaket senaryosu; GPU Only compositor yolu; Contain Layout thrash’i baskılar. Sağdaki log engine dili gibidir (offsetWidth between writes, FORCED REFLOW). Production profiler değildir.

Nasıl kullanırsınız? Önce Safe Writes ile sakin akışı görün. Sonra Thrash Loop — layout pulse, BLOCK ışını, budget overflow. En son GPU Only ile «aynı animasyon, layout’suz» farkını kıyaslayın. Dar ekranda log üstte, pipeline yatay kaydırılabilir. Amaç: «ölçmeden önce yaz/oku ayır; mümkünse transform kullan» sezgisini oturtmak.

Etkileşimler

Safe Writes
Batched style, rAF — normal flow, dirty temiz, FPS ~60. Sonuç JS→…→GPU smooth
Read Layout / Force Reflow
offsetWidth / getBoundingClientRect — SYNC FLUSH, layout pulse. Sonuç Forced sync
Thrash Loop
Write→Read→Write→Read — blocking beam, budget overflow, dropped frames. Log interleaved reads
GPU Only
transform/opacity — layout/paint bypass, compositor path. Sonuç JS→Composite→GPU
Contain Layout
contain: layout — invalidation scope daralır, thrash baskılanır.

Ne görmelisiniz?

Normal flow vs thrashing

Normal flow

  • Pipeline yeşil/mavi, FPS ~60.
  • Frame timeline dengeli segmentler.
  • Budget meter OK, dirty kapalı.

Thrashing

  • Layout chamber kırmızı pulse + SYNC LOCK.
  • Timeline’da Layout Layout Layout tekrarı.
  • FPS 60→30→14, budget OVERFLOW.

GPU only

  • Style/Layout/Paint bypass etiketi.
  • Kısa pipeline, düşük frame ms.

Main thread

  • Alt bar thrash sırasında kırmızı dolar.
  • Task block’lar görünür.

Özet ve sıra

Runtime Atlas: Event Loop → Frame Budget → Browser Topology → V8 JIT → Layout Thrashing → Paint Storm Heatmap. Ölç ve anla: önce budget, sonra thrash, sonra paint maliyeti.