V8 JIT Lifecycle — Runtime Atlas · Holodepth

Holodepth köprüsü

Event Loop zamanlar, Frame Budget render aşamasını ölçer, Browser Topology process’leri gösterir. V8 JIT Lifecycle tek bir JS fonksiyonunun kaynaktan makine koduna dönüşümünü ve speculative optimization kırılmasını öğretir.

Tamamen client-side simülasyon — V8 veya Chrome’a bağlanmaz. Amaç: IC, hidden class, deopt kavramlarını «statik slayt» değil, akışkan pipeline olarak görmek.

Flow Reactor nasıl okunur?

Compiler pipeline river · kaynak koddan makine koduna canlı dönüşüm

Browser Topology tüm Chromium süreçlerini gösterir; Flow Reactor ise tek bir fonksiyonun V8 içindeki yolculuğunu anlatır. Sahne soldan sağa akan bir «compiler river» — slayt diyagramı değil; opcode paketleri, heat ve inline cache state ile sürekli güncellenen bir runtime organism simülasyonudur.

Her kutu bir energy chamber: içinden veri geçerken parlar, yanlış varsayımda söner. Chamber’ları birleştiren conduit’ler heat arttıkça hızlanır; TurboFan açıldığında mavi speculative halo görünür; tip uyumsuzluğunda DEOPT şoku optimize yolu kırar ve bytecode’a geri dönersiniz.

Dört öğrenme fazı (önerilen sıra). Önce Phase 1 · Parse — SOURCE → AST → BYTECODE (kaynak ayrışır, Ignition bytecode doğar). Sonra Phase 2 · IC — çağrı tipleri sabitlenir, inline cache yeşile döner. Phase 3 · Optimize — heat eşiği dolunca HOT LOOP ve TURBOFAN devreye girer. Son olarak Phase 4 · Deopt — yanlış tip veya shape değişimi speculative kodu kırar; shockwave ve fallback pulse ile Ignition’a dönüşü izleyin.
Chamber, paket ve HUD. Küçük parlayan noktalar opcode paketleridir; üzerlerinde Add, Return gibi etiketler görünebilir. Üst HUD (parse time, IC stability, opt tier, deopt count, hidden classes, hotness) o anki runtime «baskısını» özetler; sağdaki Runtime log ise olayları kronolojik yazar (TurboFan optimized, IC invalidated, bailout…).
Pipeline haritası (soldan sağa). Aşağıdaki etiketler sahnedeki chamber sırasıyla aynıdır — bir stage’e tıklayınca o odaklanır (hafif zoom); sürükleyerek yatay pan, tekerlek ile zoom yapılır. Otomatik kamera, pan/zoom veya stage tıklamasından sonra 12 saniye devre dışı kalır; sahne «kaymış» hissi vermez.

Soldan sağa · tek fonksiyon (add) pipeline’ı

SOURCE
AST
BYTECODE
IC STATE
HIDDEN CLASS
HOT LOOP
TURBOFAN
DEOPT

SOURCE · AST. Kaynak metin tokenize olur; AST chamber’da mini syntax tree büyür (CallExpression, Identifier, BinaryExpression). Bu faz «kod henüz çalışmıyor, yapı oluşuyor» aşamasıdır.
BYTECODE. Ignition interpreter bytecode üretir; chamber içinde LdaNamedProperty, Add, Return… opcode’ları akan bir lane olarak kayar — makine kodu değil, yorumlanabilir ara temsil.
IC STATE · HIDDEN CLASS. Inline Cache çağrı hedefinin tipine göre renk değiştirir: tek tip → yeşil MONOMORPHIC; birkaç tip → sarı POLYMORPHIC; çok tip → kırmızı MEGAMORPHIC. Hidden class chamber’da obj.x, obj.y gibi property eklemeleri HC0→HC1→HC2 zinciri olarak shape transition gösterir; yeni property cache invalidation tetikler.
HOT LOOP · TURBOFAN. Fonksiyon sık çağrıldıkça hotness % artar; chamber etrafında turuncu pressure glow ve hızlanan conduit görünür. Eşik dolunca TurboFan speculative optimize eder — mavi halo, asm benzeri glyph’ler ve DEOPT’a giden «branch?» çizgisi (optimizasyonun kırılabilir olduğunu hatırlatır).
DEOPT (yıldız bölüm). Örneğin add(1,2) ile optimize olduktan sonra add("x", {}) girildiğinde: TurboFan halo çatlar, kırmızı shockwave yayılır, paketler bozulur (corrupt), conduit titrer, bytecode chamber’a fallback pulse çeker. Log’da «Deopt bailout → wrong map» ve «Fallback → Ignition bytecode» satırlarını arayın.

En çok öğreten iki chamber: IC STATE (mono → poly → mega geçişi) ve DEOPT (catastrophic failure + geri sarma). Simülatörde önce Stable types + Call burst, sonra Force optimize, en son Trigger deopt — tek turda dört fazı yaşarsınız.

Flow Reactor Simulator

PRESET: V8_JIT · FLAGSHIP

Byteomi runtime · CANLI · Flow reactor

Horizontal pipeline · opcode packets · IC mutation · hidden class graph · heat → TurboFan · deopt shockwave · runtime log panel.

Runtime note Simülasyon — gerçek V8 profiling değil. Davranış öğretim amaçlıdır; packet ve state geçişleri Chromium/V8 mantığına yakın tasarlanmıştır.

Parse time 1.2 ms

IC stability MONOMORPHIC

Opt tier Ignition

Deopt count 0

Hidden classes 1

Hotness 12%

Reactor insight Kod soldan sağa akar — compiler pipeline river.

Drag / touch pan · Wheel zoom · Tap stage focus

FLOW REACTOR · V8_JIT

Önerilen demo: Stable types + Call burst → heat dolar → Force optimize → Trigger deopt (add("x",{})) — shockwave + log fallback.

Bu demo ne işe yarar?

Bu sayfadaki Flow Reactor, tarayıcınızdaki gerçek V8 motoruna bağlanmaz ve sizin kodunuzu ölçmez. Bilgisayarınızda çalışan küçük bir öğretim modelidir: «bir JavaScript fonksiyonu tarayıcıda nasıl hızlanır, ne zaman yavaşlar?» sorusuna görsel cevap verir. Özellikle add(a, b) gibi basit bir fonksiyon üzerinden gider — çünkü V8’in mantığı karmaşık projelerde de aynı prensiplerle işler.

Düşünün: yazdığınız kod önce okunur ve parçalanır (SOURCE, AST). Sonra tarayıcı onu hemen makine diline çevirmek yerine ara bir «bytecode» diline çevirir (BYTECODE) — bu, hızlı başlamak için Ignition denen yorumlayıcı katmandır. Fonksiyon defalarca aynı şekilde çağrılırsa motor «bunu artık biliyorum» der: inline cache (IC) yeşile döner, çağrılar daha öngörülebilir hale gelir. Yeterince sık çalışırsa HOT LOOP ısınır; TurboFan devreye girerek daha agresif, tahmine dayalı hızlı kod üretir — mavi halo bunu simgeler.

Sorun şu: TurboFan «bundan sonra hep sayı gelecek» gibi varsayımlar yapar. Siz bir gün string veya garip bir obje gönderirseniz bu varsayım bozulur. Motor «yanılmışım» der ve deoptimize olur: kırmızı şok, bozuk paketler, tekrar bytecode yoluna dönüş. §5’teki kartlar Phase 1–4’ü özetler; sağdaki Runtime log olay günlüğü gibidir.

Hidden class ayrı bir konu: obj.x, obj.y eklediğinizde shape güncellenir; demo küçük HC grafiği gösterir. Butonlar gerçek kod yazmadan senaryo oynatır — Stable types, Call burst, Force optimize, Trigger deopt vb. Production profiler değildir.

Nasıl kullanırsınız? Önce sahneyi izleyin; sonra yeşil IC → heat → mavi TurboFan → kırmızı deopt. Stage tıklayınca odaklanır; drag pan ve wheel zoom ile gezin. Amaç ezber değil: «hızlanma stabil tiplerle kazanılır, yanlış anda kırılır» sezgisidir.

Etkileşimler

Stable types: add(1,2) benzeri çağrılar — IC monomorphic (yeşil), heat artar. Sonuç TurboFan’a hazırlık
Object mutation: obj.x, obj.y — hidden class zinciri HC0→HC1→HC2; IC invalidate. Sonuç Shape transition glow
Megamorphic call: Çok tip — IC kırmızı MEGAMORPHIC; optimizasyon zorlaşır. Sonuç Poly → mega geçiş
Trigger deopt: Yanlış tip (add("x",{})) — speculative halo kırılır, DEOPT shockwave, Ignition fallback. Sonuç Bailout → bytecode
Force optimize: Heat yeterliyse TurboFan stage mavi halo ile açılır. Log TurboFan optimized fn:add

Ne görmelisiniz?

Phase 1 → 4 progression

Phase 1–2 · Parse & IC

Paketler SOURCE → AST → BYTECODE akar.
IC chamber yeşil MONOMORPHIC — stable types ile.
Log: add(1,2) · stable types

Phase 3 · Optimized

Hotness %55+ → TurboFan, mavi speculative halo.
Conduit’ler parlak — machine code path.
Log: TurboFan optimized fn:add

Phase 4 · Deopt

Trigger deopt → kırmızı shockwave DEOPT chamber’da.
Tier Ignition’a döner; deopt count artar.
Log: bailout + fallback satırları.

Hidden class

Object mutation — mini HC graph büyür.
Property ekleme = yeni shape node.

Ayrıntılı basit özet: simülatörün hemen altındaki Bu demo ne işe yarar? kutusu.

Özet ve sıra

Runtime Atlas: Event Loop → Frame Budget → Browser Topology → V8 JIT (flagship) → Layout Thrashing.