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.

Infrared Surface Field

THERMAL PLATE · invalidation cartography

Holodepth · Surface field · Paint cartography

Dirty rects · raster tiles · layer promotion · heat plate — thrash/reactor kimliği değil; invalidation alanının termal haritası.

Field note Simülasyon; DevTools paint flashing klonu değil. Repaint alanı öğretim amaçlıdır.

A11y

FPS 60

Frame 12.0 ms

Budget OK

Repaint 8%

Raster 15%

Uploads 0

Dropped 0

STYLE PAINT RASTER

Field readout Invalidation map · heat propagation — küçük repaint, sakin raster.

Stamp → click plate · tiles = dirty raster · promotion = bypass

SURFACE FIELD · INVALIDATION

Map stamp

Promotion

Stamp seç → haritaya tıkla (dirty rect + tile). Promotion: transform / opacity / will-change paint bypass; backdrop-filter pahalı raster. Senaryo butonları hazır rect seti yükler.

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.