Paint Storm Heatmap — Runtime Atlas · Holodepth

Holodepth köprüsü

Layout Thrashing geometri maliyetini anlatır. Paint Storm boyama ve raster maliyetini anlatır: aynı frame budget içinde «hangi piksel neden yeniden üretildi?» sorusu. DevTools’un flashing highlight klonu değil — rendering behavior visualization.

Client-side simülasyon — gerçek sayfanızı ölçmez. Amaç: küçük hover repaint ile full-screen blur storm arasındaki farkı invalidation map üzerinde hissettirmek; texture upload’ta PAINT→TEXTURE yolunda VRAM hissini göstermek.

Heat reactor nasıl okunur?

Invalidation map · raster pressure · texture upload

Ortadaki INVALIDATION MAP sahte bir web yüzeyidir (kartlar, gradient, blur katmanı). Repaint olan bölge soft magma red + amber gold thermal bloom ile büyür/küçülür — eğitim değeri burada: buton hover küçük bölge, backdrop-filter tüm ekran.

Pipeline (layout yok). Safe Paint dar invalidation; Blur Storm / Canvas Noise geniş PAINT+RASTER sütunları. Texture Upload cyan/teal upload path + VRAM pulse.
Layer stack. Harita içi cam overlay (DevTools tarzı): UI · Shadow · Blur · Text · Gradient · Texture — hangi katman invalidation aldıysa glow. Shadow spread ve blur overlay farkı görselleştirilir.
Raster pressure field. Yüksek raster maliyetinde particle shimmer + texture chamber VRAM etiketi — GPU memory traffic hissi (ucuz rainbow heatmap yok).
Contain Paint. contain: paint aktifken heatmap scope daralır — Layout Thrashing’deki contain: layout ile aynı eğitim çizgisi, paint tarafında.

Soldan sağa · paint maliyeti pipeline

JS
STYLE
PAINT
RASTER
TEXTURE
GPU

Öğrenme sırası: Safe Paint → Text Hover (küçük bölge) → Shadow Burst → Blur Storm (full surface) → Texture Upload → GPU Composite → Contain Paint.

Heat Propagation Reactor

PRESET: PAINT_STORM · invalidation map

Byteomi runtime · CANLI · Heat reactor

Invalidation map · layer stack · raster pressure · texture upload packets · frame timeline · main thread paint saturation.

Runtime note Simülasyon — DevTools paint flashing klonu değil. Repaint davranışı öğretim amaçlıdır.

A11y

FPS 60

Frame 12.0 ms

Budget OK

Repaint 8%

Raster 15%

Uploads 0

Dropped 0

STYLE DIRTY PAINT DIRTY RASTER DIRTY

Reactor insight Invalidation map · heat propagation — küçük repaint, sakin raster.

Pipeline · invalidation map · timeline · dar ekranda yatay kaydır

HEAT REACTOR · PAINT_STORM

Önerilen: Safe Paint → Text Hover (küçük heatmap) → Blur Storm (full surface) → Texture Upload (cyan upload) → Contain Paint.

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

Bu sayfadaki Heat 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: «Bu değişiklik kaç pikseli yeniden boyadı ve pipeline’ın hangi aşaması (paint, raster, texture upload) yoruldu?» sorusuna görsel cevap verir.

Chrome DevTools’ta Paint flashing yalnızca «burası boyandı» der — alanlar yeşilimsi yanıp söner. Byteomi farkı rendering behavior visualization dır: ortadaki INVALIDATION MAP üzerinde invalidation enerjisinin ne kadar yayıldığını (dar elips vs tüm yüzey) görürsünüz. Üstteki pipeline (JS → STYLE → PAINT → RASTER → TEXTURE → GPU) ve alttaki timeline, bunun frame bütçesine nasıl yansıdığını birlikte anlatır.

Haritayı nasıl okursunuz? Sol üstteki LAYERS paneli (harita içi cam overlay) hangi katmanın tetiklendiğini gösterir: UI, Shadow, Blur, Text, Gradient, Texture. Text Hover küçük bir repaint bölgesi; Shadow Burst gölge yayılımıyla büyür; Blur Storm veya Canvas Noise neredeyse tüm yüzeyi kaplar — FPS düşer, timeline’da PAINT ve RASTER sütunları uzar. Repaint ~N% etiketi, etkilenen alanın kabaca oranını verir (profiler değil, sezgi).

Texture Upload modunda büyük bir bitmap yeniden çizildiğinde PAINT → TEXTURE arasında cyan upload packet’leri ve TEXTURE chamber’da VRAM pulse görünür — «piksel üretildi, GPU belleğe taşındı» akışını hissettirir. GPU Composite karşı örnek: transform ve opacity ile paint/raster atlanır, pipeline kısalır, chamber’lar «bypass» soluk kalır.

Contain Paint, Layout Thrashing’deki contain: layout ile aynı çizgide: production’da contain: paint komşu kartların gereksiz repaint’ini keser. Demo’da yeşil kesik çerçeve ve küçülen heatmap ile «scope daraldı» mesajını görürsünüz. Dirty badge’ler (STYLE / PAINT / RASTER) hangi aşamanın invalidation beklediğini özetler.

Nasıl kullanırsınız? Önce Safe Paint (dar heatmap, ~60 FPS). Sonra Text Hover ile küçük bölgeyi, Blur Storm ile felaket senaryosunu kıyaslayın. Texture Upload ve GPU Composite ile çözüm yolunu görün; en son Contain Paint ile optimizasyonu deneyin. Sağdaki log engine dili gibidir (backdrop-filter · full surface raster, TEXTURE UPLOAD · VRAM commit). Gerçek optimizasyon için yine kendi profiler’ınızı kullanın — bu model, ölçmeden önce «alanı küçült, mümkünse compositor kullan» sezgisini oturtmak içindir.

Etkileşimler

Safe Paint: Batched invalidation — dar heatmap, düşük raster.
Text Hover: Text layer only — küçük magma bölge.
Shadow Burst: box-shadow spread — shadow + UI katmanları.
Blur Storm: backdrop-filter — full-surface raster pressure.
Gradient Shift / Canvas Noise: Sürekli paint — timeline’da üst üste PAINT/RASTER.
Texture Upload: Upload packets · VRAM commit log satırı.
GPU Composite / Contain Paint: Compositor bypass veya contain: paint scope.

Ne görmelisiniz?

Küçük bölge vs paint storm

Safe / text hover

Heatmap küçük, FPS ~60.
Timeline dengeli; upload yok.

Blur / canvas storm

Invalidation map neredeyse tam ekran.
RASTER sütunları baskın, FPS düşer.

Texture upload

Cyan conduit PAINT→TEXTURE.
Upload counter artar, VRAM pulse.

Contain paint

Heatmap contain kutusu içinde kalır.
Repaint % belirgin düşer.

Özet ve sıra

Runtime Atlas: Event Loop → Frame Budget → Browser Topology → V8 JIT → Layout Thrashing → Paint Storm Heatmap. Layout’u anladıktan sonra boyama maliyetini görselleştirin.