WEB / WEB-10.03
JavaScript execution ve event loop
Synchronous code, Promise executor, microtasks ve later task’ları bounded bir order fixture’ında ayır.
1. Core · Mekanizma
Hareket olmadan bütün senaryoları oku
Task + microtasks
- Before synchronous start
Fixture hazırdır; callback logs veya queue sonuçları henüz üretilmedi.
- Synchronous stack
- Stack:empty
- Microtask checkpoint
- Microtasks:[]
- Later task
- Timer:not scheduled
- Presentation boundary
- Paint:not measured
- Executor runs now
Script başlangıcı ve Promise executor synchronous çalışır; then callback henüz çalışmaz.
- Synchronous stack
- Log:start,executor
- Microtask checkpoint
- Reaction queued
- Later task
- Timer:not scheduled
- Presentation boundary
- Paint:not measured
- Synchronous prefix ends
queueMicrotask ve timer seçilir; script:end log’u current code bitmeden yazılır.
- Synchronous stack
- Log:start,executor,end;stackempty
- Microtask checkpoint
- Microtasks:promise,microtask
- Later task
- Timer:requested0
- Presentation boundary
- Paint:not measured
- Promise reaction
Checkpoint önce sıradaki Promise reaction’ı işler; timer prefix’in arasına girmez.
- Synchronous stack
- Prefix complete
- Microtask checkpoint
- Log:+promise;queue:microtask
- Later task
- Timer:not processed
- Presentation boundary
- Paint:not measured
- Microtask adds one job
Seçilen microtask tek nested job ekler; checkpoint kuyruğu yeniden boşalana dek sürer.
- Synchronous stack
- Prefix complete
- Microtask checkpoint
- Log:+microtask;queue:nested
- Later task
- Timer:not processed
- Presentation boundary
- Paint:not measured
- Bounded checkpoint drains
Nested callback işlenir; microtask queue boş olur fakat pixels hakkında sonuç yoktur.
- Synchronous stack
- Stack:empty
- Microtask checkpoint
- Log:+nested;queue:[]
- Later task
- Timer:pendingselection
- Presentation boundary
- Paint:not measured
- Later timer callback
Timer daha sonraki task’ta işler; exact elapsed time veya rAF sırası burada sabitlenmez.
- Synchronous stack
- Stack returns empty
- Microtask checkpoint
- Checkpoint drained
- Later task
- Log:+timer
- Presentation boundary
- Paint:not measured
Executor vs then
- Before Promise creation
Normal local script başlamıştır; executor ve reaction sonuçları henüz yoktur.
- Synchronous stack
- Log:start
- Microtask checkpoint
- Reaction:absent
- Later task
- Timer:none
- Presentation boundary
- Paint:not measured
- Executor synchronous
Promise constructor executor’ı hemen çağırır; fulfilled state callback çalışması değildir.
- Synchronous stack
- Log:start,executor
- Microtask checkpoint
- Promise:fulfilled;reactionpending
- Later task
- Timer:none
- Presentation boundary
- Paint:not measured
- Caller continues
Constructor döner ve caller end yazar; then reaction current prefix’i kesmez.
- Synchronous stack
- Log:start,executor,end
- Microtask checkpoint
- Reaction:queued
- Later task
- Timer:none
- Presentation boundary
- Paint:not measured
- Reaction later
Checkpoint reaction’ı çalıştırır; executor ve reaction farklı completion sınırlarıdır.
- Synchronous stack
- Stack:empty
- Microtask checkpoint
- Log:+reaction;queueempty
- Later task
- Timer:none
- Presentation boundary
- Paint:not measured
Await continuation
- Caller starts
Caller bir async function çağırmaya hazırdır; bağımsız thread başlatılmaz.
- Synchronous stack
- Caller active
- Microtask checkpoint
- Microtasks:[]
- Later task
- Await:absent
- Presentation boundary
- Paint:not measured
- Before await logs
Async function await’e kadar synchronous yürür ve before-await kaydını yazar.
- Synchronous stack
- Log:before-await
- Microtask checkpoint
- Continuation:pending
- Later task
- LocalPromise:fulfilled
- Presentation boundary
- Paint:not measured
- Caller keeps running
Await continuation ertelenirken caller after-call yazar; function henüz devam etmez.
- Synchronous stack
- Log:before-await,after-call
- Microtask checkpoint
- Continuation:queued
- Later task
- No network operation
- Presentation boundary
- Paint:not measured
- Continuation resumes
Uygun reaction işi after-await yazar; ordering CPU paralelliği kanıtlamaz.
- Synchronous stack
- Prefix complete
- Microtask checkpoint
- Log:+after-await
- Later task
- LocalPromise consumed
- Presentation boundary
- Paint:not measured
- Boundary retained
Local continuation tamamdır; server transaction veya frame receipt bu sonuçtan çıkarılmaz.
- Synchronous stack
- Stack:empty
- Microtask checkpoint
- Bounded fixture complete
- Later task
- Network:not executed
- Presentation boundary
- Pixels:not captured
ROLLER · STATE · VERİ AKIŞI
Engine, host ve browser aynı kutu değildir
JavaScript engine ECMAScript code’unu parse edip değerlendirir; implementation bytecode/JIT gibi teknikler kullanabilir. DOM, fetch ve timers ise browser host’unun sunduğu web APIs’dir. Engine’in hangi optimizasyonu yaptığına bakmadan language semantics’i açıklayabiliriz. “JavaScript çalışır” demek bir network request’in tamamlandığını veya DOM’un oluştuğunu söylemez.
Array ve Promise gibi language objects ile document ve Window.setTimeout gibi browser yüzeylerini ayır. Aynı language, başka runtime’da farklı host API’leriyle çalışabilir. Bu yüzden Node timer sonucunu browser scheduler’ın kanıtı sayamayız. Buradaki sıra örneği, tanımlı synchronous işler ile microtask ve timer arasındaki dependency’leri izler; bütün host işlerinin evrensel sırasını açıklamaz.
Execution context ve call stack
Execution context, ECMAScript specification’ın code evaluation ilerlemesini takip ettiği bir model’dir. Function, Realm ve environment ilişkileri bu modelin parçalarıdır; script’in doğrudan okuyabildiği bir “context object” olmak zorunda değildir. Running context stack’in üstündedir; nested function çağrısı yeni context ile control’u ilerletir. Exception ve async suspension gibi davranışlar için bütün context geçişleri basit bir çizimin aynısı değildir.
A çağrısı B’yi çağırdığında B’nin synchronous işi dönmeden A’nın sonraki satırı çalışmaz. Call stack’i bu dependency için kullanıyoruz; artifact’in callTrace’i A:start,B,A:end sonucunu kaydeder, engine’in internal stack memory’sini capture ettiği iddia edilmez. Stack boşalınca her şeyin tamamlandığı da söylenemez: pending callbacks, microtasks ve host işleri kalabilir.
Event loop callback için bir sıra kurar
HTML event loop scripts, user interaction, networking ve rendering gibi işleri koordine eder. One event loop’un birden fazla task queue’su olabilir; farklı task source’lar arasında browser’ın scheduler tercihleri vardır. Bu model’i bütün network,click ve timer callbacks için tek global FIFO queue olarak çizmek doğru değildir. Microtask queue da sıradan task queue’su değildir.
Normal fixture’da aynı synchronous başlangıç içinde bir timer ve iki microtask kaynağı seçilir. Timer delay0 daha sonra runnable olabilecek callback’i ister; current code’u keserek callback çalıştırmaz. Genel network ve user-event ordering’ini bu küçük fixture’dan türetemeyiz. Scene sadece bu tanımlı işlerin birbirine dependency’sini taşır; sabit milisaniye veya FPS sonucu üretmez.
Promise executor synchronous, reaction microtask
new Promise(executor) executor function’ını creation sırasında synchronous çağırır. resolve çağrısı Promise’i fulfilled yapabilir; then reaction current synchronous satırların arasına girmez, uygun checkpoint’te microtask olarak çalışır. “Promise içinde” görülen her code’u async saymak executor ile reaction’ı karıştırır.
Fixture output prefix’i script:start,executor,script:end olur; promise reaction bundan sonra görünür. queueMicrotask ile daha önce sıraya giren işlerin sırası korunur ve checkpoint queue boşalana kadar devam eder. Seçilen callback bir adet nested microtask ekler; nested iş aynı checkpoint içinde işlenir. Model bounded’dır: sonsuz enqueue veya browser’ı kilitleyen code verilmez.
Await control’u askıya alır, thread açmaz
Bir async function await noktasına kadar synchronous ilerleyebilir. Await’in devamı fulfilled bir Promise için de daha sonra reaction işiyle yürür; caller kendi synchronous işine devam edebilir. Await kullanmak bağımsız CPU thread’i oluşturmaz. Başka agent/worker ile paralel iş ayrı bir mechanism ve iletişim sınırı gerektirir.
Await fixture’ında before-await,after-call,after-await sırası seçilir. İş normal local Promise.resolve("Atlas") üzerindedir; fetch veya server commit yoktur. Bu küçük gözlem code’un continuation timing’ini anlatır, herhangi bir transaction’ın atomikliği veya bir resource action’ın onayını anlatmaz. Öğrenci hangi function’ın devamının ertelendiğini açıklayarak “async olan her satır paraleldir” yanılgısını bırakır.
DOM update bir frame receipt değildir
Callback DOM state’ini değiştirebilir; browser rendering opportunity’de bu state’ten yeni görünüm üretir. Current HTML processing model, window rendering işini rendering task source üzerinden schedule eder. Her task sonrasında zorunlu yeni paint veya bütün callback’lerden sonra sabit bir refresh olduğunu varsayma. Hidden document ve unnecessary rendering gibi koşullar da rendering’i etkiler.
requestAnimationFrame callback’i browser’ın repaint öncesi çalıştırdığı bir hook’tur; her frame için tekrar request gerekir ve hidden/background durumunda genellikle durabilir. Bu ders timer ile rAF arasında evrensel ordering iddiası yapmaz. Artifact’in paintCaptured=false alanı bilinçlidir: log sırası ve current DOM text’i, pixel presentation anını ölçmez.
2. Red · Güven ve etki
Hareket olmadan bütün senaryoları oku
Executor/reaction
- Executor synchronous prefix içinde görüldü
Promise constructor executor’ı script:start sonrasında synchronous çalışır ve resolve eder. expectedLog executor’ı script:end’den önce tutar. Promise’in resolved olması reaction callback’in aynı anda işlendiğini göstermez.
- Callback observations
- script:start / executor / script:end
- Continuation gate
- Scheduling bekliyor
- Application completion
- Outcome bilinmiyor
- Reaction current work bitince işlendi
promise callback’i synchronous prefix bitince checkpoint’te işlenir; ardından microtask ve nested gelir. İş hazır bilgisi ile callback işlendi bilgisi ayrı state’lerdir. Local scheduling bir network receipt değildir.
- Callback observations
- script:start / executor / script:end
- Continuation gate
- Reaction after script:end / checkpoint order
- Application completion
- Outcome bilinmiyor
- Fulfillment için tamamlanan iş açık tutuldu
Promise fulfilled yalnız temsil ettiği işe dair sonuç verir. Data received, body consumed, validated, DOM updated ve server committed başka completion sınırları olabilir. Bu normal callback fixture’ı application persistence ölçmez.
- Callback observations
- script:start / executor / script:end
- Continuation gate
- Reaction after script:end / checkpoint order
- Application completion
- Callback known / application commit unmeasured
- Nested microtask aynı bounded checkpoint’e eklendi
microtask callback’i nested microtask ekler. expectedLog promise, microtask, nested ve sonra timer sırasını verir. Bu sonlu örnek başka task source’ların bütün olası sırasını veya responsiveness süresini tanımlamaz.
- Callback observations
- promise→microtask→nested→timer
- Continuation gate
- Reaction after script:end / checkpoint order
- Application completion
- Callback known / application commit unmeasured
- Timer scheduling execution deadline olmadı
timerDelayArgument 0’dır fakat elapsedMillisecondsExpected null kalır. Timer synchronous work arasına giremez; tam 0 ms execution garantisi yoktur. Callback sırası ile timer latency aynı evidence değildir.
- Callback observations
- promise→microtask→nested→timer
- Continuation gate
- Delay argument0 / exact latency not measured
- Application completion
- Callback known / application commit unmeasured
- Control doğru completion invariant’ına bağlandı
UI sadece log’daki done benzeri label’a dayanarak business success göstermemelidir. İş contract’ı validation veya commit istiyorsa o stages ayrıca beklenir. Bu lesson’da network ve paint false’tur; broader action sonucu UNKNOWN kalır.
- Callback observations
- promise→microtask→nested→timer
- Continuation gate
- Delay argument0 / exact latency not measured
- Application completion
- Define completion contract / do not infer business success
Await boundary
- Async function caller’dan farklı continuation seçti
expectedAwaitTrace before-await, after-call ve after-await sırasını verir. Await caller’ın bütün execution’ını durdurmaz; continuation ertelenirken caller ilerleyebilir. Async label CPU işini otomatik başka thread’e taşımaz.
- Callback observations
- before-await / after-call / after-await
- Continuation gate
- Scheduling bekliyor
- Application completion
- Outcome bilinmiyor
- Deferred continuation dependency olarak yorumlandı
after-call observation’ı async işi tamamen bitti diye göstermez. Product state’i hangi completion’a bağlıysa o continuation veya outcome açıkça beklenmelidir. Caller progress ile awaited work success iki farklı conditions’dır.
- Callback observations
- before-await / after-call / after-await
- Continuation gate
- Caller progressed / awaited outcome separate
- Application completion
- Outcome bilinmiyor
- Async keyword responsiveness garantisi olmadı
Uzun synchronous CPU işi main-thread work’ü geciktirebilir. Async function kullanmak tek başına paralellik oluşturmaz. Bounded work veya uygun worker tasarımı ayrı control’dür; bu fixture stall süreleri veya device performance ölçmez.
- Callback observations
- before-await / after-call / after-await
- Continuation gate
- Caller progressed / awaited outcome separate
- Application completion
- Async ≠ automatic CPU parallelism
- Call trace specification alias’ı olarak tutuldu
expectedCallTrace A:start, B, A:end’dir. Execution-context çizimi specification model’idir; engine memory capture veya script’in okuyabildiği native context object değildir. Error stacks farklı representations verebilir.
- Callback observations
- A:start→B→A:end / spec aliases
- Continuation gate
- Caller progressed / awaited outcome separate
- Application completion
- Async ≠ automatic CPU parallelism
- Lifecycle ve cancellation ayrı koşul olarak kaldı
Pending callback’in bütün lifetime boyunca aynı Document’te çalışacağı varsayılmaz. Navigation ve cancellation başka koşullardır. Bu seçilmiş await trace, tüm dispatch edge case’lerini veya document lifetime’ını simüle etmez.
- Callback observations
- A:start→B→A:end / spec aliases
- Continuation gate
- Continuation order known / lifecycle separate
- Application completion
- Async ≠ automatic CPU parallelism
- Await scope business sonucu ile karıştırılmadı
Bu story continuation sırası ve caller progress’ini açıklar. Server mutation, persisted state veya UI pixels için evidence yoktur. Async mechanism’i doğru okumak güvenli mental model sağlar; yapılmamış runtime işi olmuş sayılmaz.
- Callback observations
- A:start→B→A:end / spec aliases
- Continuation gate
- Continuation order known / lifecycle separate
- Application completion
- Continuation known / broader outcomes unmeasured
VARSAYIM · SINIR · KONTROL
Sıralamayı timing ile karıştırma
Yetkili bir incelemede log order küçük bir dependency’yi doğrular; “0ms timer” etiketi callback’in tam0ms içinde çalıştığını doğrulamaz. Network paneli, console ve DOM snapshot’ı da farklı observation owners’a aittir. Callback’in çağrıldığını görmen response body’nin tamamını tükettiğini veya persistent action’ın commit edildiğini kanıtlamaz.
Defterin normal branch’ini çalıştırmadan önce synchronous prefix ve microtask sırasını yaz. Timer’ın prefix’in arasına giremeyeceğini, nested microtask’in bounded checkpoint’teki yerine bakarak açıklayabilirsin. Bu normal scheduler pratiği saldırı yarışını tetikleme yöntemi değildir. Başka task source’ların sırasını bu fixture’ın log’larından genelleme.
Context çizimi engine capture değildir
Function boundary’lerini anlatmak için stack alias’ları kullanılır. Browser error stack’i veya performance sample aynı görünümü zorunlu olarak üretmez: implementation optimizasyonları, source mapping ve async stack tooling’i farklı representations verir. Source ile gözlenen frame’in hangi sürüme ait olduğunu belirle; çizimdeki üç kutuya bakıp native memory sonucu yazma.
Await branch’inde async function continuation’ı ertelendiği halde caller çalışabilir. Pending bir callback ayrıca lifetime boyunca aynı Document’te çalışacak diye varsayılmaz; navigation veya cancellation ayrı koşullardır. Bu ders dispatch ve lifecycle’ın bütün edge case’lerini simüle etmez. İnceleme iddiasını mevcut fixture ve seçilmiş continuation sonucuyla sınırla.
3. Blue · Güvenli geliştirme ve savunma
Hareket olmadan bütün senaryoları oku
Order review
- Beklenen synchronous prefix source’a bağlandı
Log satırlarını seçilmiş synchronous kod, Promise reaction, queueMicrotask callback’i ve timer callback’i üretir. expectedLog beklenen sıradır; yeni bir çalıştırmanın console kaydı değildir. Callback’in yazdığı label hangi işin bittiğini söyler; body tüketimi, server commit veya DOM/pixel sonucu bu fixture’da üretilmez. expectedLog script:start, executor ve script:end ile başlar. Source’da executor synchronous constructor işi, then reaction ise scheduled continuation’dır. Observer bu farklı rolleri log label’larından ayrı okur.
- Order ledger
- Synchronous prefix: start/executor/end
- Callback comparison
- Scheduling bekliyor
- Evidence verdict
- Outcome bilinmiyor
- Checkpoint order sonlu enqueue sırasından kuruldu
promise ve microtask önceden queued’dur; microtask içinden nested eklenir. Expected suffix promise, microtask, nested olur. Bu concrete ordering aynı fixture’ın dependency’sidir; arbitrary task source sırası değildir.
- Order ledger
- Synchronous prefix: start/executor/end
- Callback comparison
- Checkpoint: promise/microtask/nested
- Evidence verdict
- Outcome bilinmiyor
- Timer label queue order’ıyla eşleştirildi
Timer son expected label’dır. Argüman 0, measured elapsed time değildir. DOM veya pixels observation yokken timer label’ının görülmesi rendered update’in kullanıcıya sunulduğu timestamp olarak raporlanmaz.
- Order ledger
- Timer after checkpoint / latency unknown
- Callback comparison
- Checkpoint: promise/microtask/nested
- Evidence verdict
- Outcome bilinmiyor
- Call ve await controls farklı invariants’ı sınadı
A:start/B/A:end normal synchronous call order’ıdır. before-await/after-call/after-await caller progress ile continuation’ı ayırır. İki trace’te aynı queue/stack record’u varmış gibi correlation kurulmaz.
- Order ledger
- Timer after checkpoint / latency unknown
- Callback comparison
- Call trace and await trace separately consistent
- Evidence verdict
- Outcome bilinmiyor
- Order consistency browser performance claim’i olmadı
Sonlu local callbacks expected ordering’i gösterebilir. Timer latency, rAF relation, network, worker concurrency veya paint ölçülmez. Normal ordering’in doğru olması responsiveness veya action completion’ı ayrıca kanıtlamaz.
- Order ledger
- Timer after checkpoint / latency unknown
- Callback comparison
- Call trace and await trace separately consistent
- Evidence verdict
- Ordering supported / performance unmeasured
- Regression gereken milestone’a sınırlandı
Kontrol synchronous prefix, microtask suffix ve await continuation’ı ayrı doğrular. Log’da label yoksa cause için coverage gerekir. Sensitive data taşımayan bounded labels yeterli olabilir; application commit ayrıca gözlenmelidir.
- Order ledger
- Timer after checkpoint / latency unknown
- Callback comparison
- Call trace and await trace separately consistent
- Evidence verdict
- Recheck prefix/checkpoint/continuation separately
Presentation gap
- Log tamamlığı paint record’undan ayrıldı
Log satırlarını seçilmiş synchronous kod, Promise reaction, queueMicrotask callback’i ve timer callback’i üretir. expectedLog beklenen sıradır; yeni bir çalıştırmanın console kaydı değildir. Callback’in yazdığı label hangi işin bittiğini söyler; body tüketimi, server commit veya DOM/pixel sonucu bu fixture’da üretilmez. Expected seven labels verilmiştir; paintCaptured false’tur. Callback’lerin işlendiğini bilmek text’in paint edildiğini veya ekranda gösterildiğini söylemez. renderOrderingWithTimer bu fixture’da unspecified’dır.
- Order ledger
- Seven expected labels / paint capture absent
- Callback comparison
- Scheduling bekliyor
- Evidence verdict
- Outcome bilinmiyor
- Timer ve rendering için guessed ordering eklenmedi
Bu ledger timer’ın checkpoint sonrasını açıklar; rAF ile timer arasında evrensel sıra üretmez. Event loop animation’ındaki kutular gerçek compositor timeline değildir. Rendering opportunity timing kendi observation’ını ister.
- Order ledger
- Seven expected labels / paint capture absent
- Callback comparison
- No rAF/timer order claim
- Evidence verdict
- Outcome bilinmiyor
- Eksik callback event’i cause’u açıklamadı
Alternatif trace’te nested label gözlenmese queue’nun yanlış çalıştığı otomatik söylenmez. Logging coverage, seçilmiş source ve document lifetime ayrı gerekir. Tam fixture log’u missing observation yerine kopyalanmaz.
- Order ledger
- Missing label / coverage and lifecycle needed
- Callback comparison
- No rAF/timer order claim
- Evidence verdict
- Outcome bilinmiyor
- Required completion contract evidence’a bağlandı
UI update sorusu DOM observation, presented pixels sorusu capture, server commit sorusu server-side record ister. Promise reaction label’ı bu üç sorunun ortak kanıtı değildir. Review hangi outcome’un arandığını önce belirler.
- Order ledger
- Missing label / coverage and lifecycle needed
- Callback comparison
- Outcome-specific observations required
- Evidence verdict
- Outcome bilinmiyor
- Paint ve timing verdict unknown kaldı
Exact timer latency ve presented pixels için UNKNOWN korunur. Missing capture rendering failure kanıtı değildir; complete callback order da first-pixel success değildir. Observation family’leri ayrı tutulur.
- Order ledger
- Missing label / coverage and lifecycle needed
- Callback comparison
- Outcome-specific observations required
- Evidence verdict
- UNKNOWN: latency and presented pixels
- Yeni evidence yalnız sorunun scope’unda istendi
İlerlemek için scoped timestamp ve required DOM/presentation record gerekir. Full page data veya user identity toplamak şart değildir. Callback order sonucu measured timing olarak yeniden etiketlenmez.
- Order ledger
- Missing label / coverage and lifecycle needed
- Callback comparison
- Outcome-specific observations required
- Evidence verdict
- Needed: scoped timing/presentation observations
UYGULAMA · GÜVENLİK KONTROLÜ · DOĞRULAMA
Async için açık completion contract kur
Log satırlarını seçilmiş synchronous kod, Promise reaction, queueMicrotask callback’i ve timer callback’i üretir. expectedLog beklenen sıradır; yeni bir çalıştırmanın console kaydı değildir. Callback’in yazdığı label hangi işin bittiğini söyler; body tüketimi, server commit veya DOM/pixel sonucu bu fixture’da üretilmez. Application code hangi callback’in neyi tamamladığını açık tutmalıdır. Data received,body consumed,validated,DOM updated ve server committed aynı olaylar değildir. UI durumunu ilerletirken doğru completion sınırını seç; Promise fulfilled olması yalnız o Promise’in temsil ettiği işe dair sonuçtur. Ürün contract’ı daha fazla işlem gerektiriyorsa bu adımlar ayrıca modellenir.
Seçilmiş normal örnekte executor ve reaction farklı görevlerdir. Observer bunu log label’larından ayırabilir; “iş hazır” bilgisi ile “callback işlendi” bilgisi iki satır olarak tutulur. Bu küçük ayrım error ve cancellation davranışını açıklamayı kolaylaştırır. Burada gerçek application request veya credential işlemi eklenmez; local semantics üzerinde güvenilir bir zihinsel temel kurulur.
Responsiveness ve kanıt ayrı değerlendirilir
Bir main-thread işi uzun sürerse user interaction ve renderer work gecikebilir. Async keyword tek başına CPU maliyetini başka thread’e taşımaz; bounded work veya uygun worker tasarımı ayrı değerlendirilir. Bu ders stall süresi,device speed veya bütün browser’lar için refresh guarantee üretmez. Native fixture kısa ve sonlu callback’lerden oluşur.
Synchronous prefix, microtask order ve await continuation için hangi callback’in hangi aşamada çalıştığını sırayla izle. Completion label’ı hangi operation’ın bittiğini belirtmelidir. Bir Promise’in resolve edilmesi, ona bağlı reaction’ın aynı anda çalıştığını söylemez; task ve microtask sırasını bu ayrımla oku.
ŞİMDİ VAKAYA UYGULA
Executor, microtask, await continuation ve timer hangi farklı completion sınırlarını taşır?
Sonlu örnek script:start, executor ve script:end ile başlar; promise, microtask ve nested checkpoint’te çalışır, timer sonra gelir. Await caller progress’ini engellemez. Bu sıra exact latency, painted pixels veya business commit ölçümü değildir.
Vakadaki response receipt, parsing, callback ve görünür DOM sonucunu sıraya koy. Eski başlığın kalmasını bu dersteki browser state ayrımlarıyla açıklamayı dene.
Bağlı vaka dosyasını aç ↗ÖRNEĞİ BİRLİKTE OKUYALIM
Bounded callback order defteri
Bir alan seç; hangi sonucu desteklediğini ve nerede yetersiz kaldığını incele.
Ham kaydı ve alan açıklamalarını oku
{
"normalCode": "const log=[];log.push(\"script:start\");new Promise(resolve=>{log.push(\"executor\");resolve();}).then(()=>log.push(\"promise\"));queueMicrotask(()=>{log.push(\"microtask\");queueMicrotask(()=>log.push(\"nested\"));});setTimeout(()=>log.push(\"timer\"),0);log.push(\"script:end\");",
"expectedLog": [
"script:start",
"executor",
"script:end",
"promise",
"microtask",
"nested",
"timer"
],
"expectedCallTrace": [
"A:start",
"B",
"A:end"
],
"expectedAwaitTrace": [
"before-await",
"after-call",
"after-await"
],
"executionContextModel": "Instructional specification aliases,not engine memory/stack capture",
"timerDelayArgument": 0,
"elapsedMillisecondsExpected": null,
"microtasksAddedByMicrotask": 1,
"renderOrderingWithTimer": "unspecified in this fixture",
"paintCaptured": false,
"networkExecuted": false
}- expectedLog
- Bir normal synchronous başlangıç ve bounded checkpoint’in sıra sonucu.
- timerDelayArgument
- Scheduling isteği; ölçülmüş callback süresi değildir.
- executionContextModel
- Spec model’i anlatır; script’in okuyabildiği native context object değildir.
- paintCaptured
- False: callback sırası pixels’in sunulduğu zamanı kanıtlamaz.
Normal sonlu browser fixture; timer latency,rAF/timer ordering,network,engine memory,worker concurrency veya pixels capture yok. Scene queues selected semantic aliases’tır.
İki yanlış kanı
Promise içindeki tüm code asynchronous çalışır.
Constructor executor synchronous çağrılır; then reaction uygun checkpoint’te daha sonra çalışır.
Timer0 hemen çalışır; her task’tan sonra paint olur.
Timer current code’u kesmez; rendering ayrı task/opportunity koşullarına bağlıdır. Sıra gözlemi timing ölçümü değildir.
SIRA SENDE
Bu hikâyeyi sen çöz.
Sonucu tahmin et, kanıtın sınırını bul ve nedenini kendi cümlenle anlat.
Promise executor, script:end ve .then callback hangi sırada çalışır?
- promise → executor → script:end; Promise yeni thread açar.
- executor → script:end → promise.
Gerekçeli cevabı oku
executor → script:end → promise. — new Promise executor’ı güncel job içinde çalışır. then reaction, script bittikten sonraki microtask checkpoint’te işlenir.
setTimeout(..., 0) neden tam 0 ms’de çalışıldığı kanıtı değildir?
Dersten seçilen artifact alanları; öğretim örneği
- expectedLog
- ["script:start","executor","script:end","promise","microtask","nested","timer"]
- timerDelayArgument
- 0
- elapsedMillisecondsExpected
- null
- Timer bu izde microtask’lerden sonra; geçen süre verilmemiş.
- 0 argümanı callback’in script ortasında tam 0 ms’de çalışmasını sağlar.
Gerekçeli cevabı oku
Timer bu izde microtask’lerden sonra; geçen süre verilmemiş. — elapsedMillisecondsExpected=null. Scheduling ve bekleyen job’lar, delay argümanından ayrı etkenlerdir.
before-await → after-call → after-await sırası neden await’in thread açması değildir? Paint hakkında ne söylenemez?
Gerekçeli cevabı oku
await, function continuation’ını bekletir ve caller’ın ilerlemesine izin verir. Continuation daha sonra job/microtask scheduling ile sürer. Bu iz gerçek engine thread veya memory capture değildir. Callback veya DOM işleminin bitmesi paint ölçümü sağlamaz; buradan kesin pixel ya da requestAnimationFrame/timer sırası garantisi çıkarılmaz.
□ Continuation scheduling’i thread oluşturma saymadım.
□ Log sırasını paint ölçümü saymadım.
Uygulama konsolunu aç · request / response / browser
Request, URL, cookie ve DOM örneklerini ayrıca aç
MANUAL LAB
Browser Observation Lab
Document, DOM/CSS ve event-loop sonuçlarını 18 alanda tahmin et; native Browser gözlemini kaydet ve nedenini açıkla.
Tahmin → gözlem → açıklama workbook’unu aç ↗GitHub kaynakları ↗Kaynaklar ve kapsam
- ECMAScript: Execution contexts and agents9.4 Execution Contexts; 9.6 Agents; specification device not directly observable
- WHATWG HTML: event loops8.1.7.1 Definitions; 8.1.7.2 Queuing tasks; 8.1.7.3 Processing model; perform a microtask checkpoint; rendering task source
- WHATWG HTML: timers and microtask queuing8.6 Timers; 8.7 Microtask queuing
- MDN: Using microtasksTasks vs microtasks; Microtasks; queueMicrotask
- Promise constructorDescription:executor called synchronously; fulfilled reaction asynchronous
- Window requestAnimationFrameDescription:before repaint, one-shot, background pause
- Window setTimeoutReasons for delays longer than specified; Late timeouts; Nested timeouts
- Chromium RenderingNG architectureThreads; main-thread script and rendering; compositor separation