[{"data":1,"prerenderedAt":1214},["ShallowReactive",2],{"learn-doc-\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop\u002Fcall-stack":3,"learn-doc-topic-\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop":412,"lessons-\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop":443,"sidebar-course-\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop":1159,"i-lucide:chevron-down":1171,"i-lucide:search":1175,"i-lucide:sun":1177,"i-lucide:moon":1179,"i-lucide:menu":1181,"i-lucide:panel-left":1183,"i-lucide:chevron-right":1185,"i-lucide:arrow-right":1187,"i-lucide:corner-down-right":1189,"i-lucide:mail":1191,"i-simple-icons:x":1193,"i-simple-icons:linkedin":1195,"i-simple-icons:dribbble":1197,"i-simple-icons:github":1199,"sidebar-quiz-\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop":1201,"i-lucide:workflow":1202,"i-lucide:circle-check-big":1204,"i-lucide:printer":1206,"i-lucide:graduation-cap":1208,"i-lucide:book-marked":1210,"i-lucide:notebook-pen":1212},{"id":4,"title":5,"access":6,"body":7,"description":403,"extension":404,"lang":405,"meta":406,"navigation":115,"order":32,"partial":407,"path":408,"seo":409,"stem":410,"__hash__":411},"lessons\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop\u002F01.call-stack.md","The call stack","free",{"type":8,"value":9,"toc":398},"minimark",[10,14,18,125,132,137,140,143,202,208,212,220,231,299,304,308,311,380,394],[11,12,5],"h1",{"id":13},"the-call-stack",[15,16,17],"p",{},"JavaScript has a single call stack. One thing executes at a time, and a function\nruns to completion before anything else gets a turn.",[19,20,25],"pre",{"className":21,"code":22,"language":23,"meta":24,"style":24},"language-js shiki shiki-themes github-dark-dimmed github-dark-dimmed","function third() {\n  return 'done'\n}\nfunction second() {\n  return third()\n}\nfunction first() {\n  return second()\n}\n\nfirst()\n","js","",[26,27,28,45,55,61,71,81,86,96,105,110,117],"code",{"__ignoreMap":24},[29,30,33,37,41],"span",{"class":31,"line":32},"line",1,[29,34,36],{"class":35},"sEYkB","function",[29,38,40],{"class":39},"s-wk_"," third",[29,42,44],{"class":43},"sM9_K","() {\n",[29,46,48,51],{"class":31,"line":47},2,[29,49,50],{"class":35},"  return",[29,52,54],{"class":53},"szYpP"," 'done'\n",[29,56,58],{"class":31,"line":57},3,[29,59,60],{"class":43},"}\n",[29,62,64,66,69],{"class":31,"line":63},4,[29,65,36],{"class":35},[29,67,68],{"class":39}," second",[29,70,44],{"class":43},[29,72,74,76,78],{"class":31,"line":73},5,[29,75,50],{"class":35},[29,77,40],{"class":39},[29,79,80],{"class":43},"()\n",[29,82,84],{"class":31,"line":83},6,[29,85,60],{"class":43},[29,87,89,91,94],{"class":31,"line":88},7,[29,90,36],{"class":35},[29,92,93],{"class":39}," first",[29,95,44],{"class":43},[29,97,99,101,103],{"class":31,"line":98},8,[29,100,50],{"class":35},[29,102,68],{"class":39},[29,104,80],{"class":43},[29,106,108],{"class":31,"line":107},9,[29,109,60],{"class":43},[29,111,113],{"class":31,"line":112},10,[29,114,116],{"emptyLinePlaceholder":115},true,"\n",[29,118,120,123],{"class":31,"line":119},11,[29,121,122],{"class":39},"first",[29,124,80],{"class":43},[15,126,127,128,131],{},"The stack grows to ",[26,129,130],{},"first → second → third",", then unwinds. Nothing interleaves.",[133,134,136],"h2",{"id":135},"run-to-completion-is-a-guarantee","Run-to-completion is a guarantee",[15,138,139],{},"Once a function starts, no other JavaScript can run until it returns. This is why\nyou never need locks around a shared variable: no other code can observe an\nintermediate state.",[15,141,142],{},"It is also why one slow function freezes everything:",[19,144,146],{"className":21,"code":145,"language":23,"meta":24,"style":24},"const start = Date.now()\nwhile (Date.now() - start \u003C 5000) {}\n\u002F\u002F Nothing else runs for five seconds — no clicks, no timers, no rendering.\n",[26,147,148,168,196],{"__ignoreMap":24},[29,149,150,153,157,160,163,166],{"class":31,"line":32},[29,151,152],{"class":35},"const",[29,154,156],{"class":155},"sQdni"," start",[29,158,159],{"class":35}," =",[29,161,162],{"class":43}," Date.",[29,164,165],{"class":39},"now",[29,167,80],{"class":43},[29,169,170,173,176,178,181,184,187,190,193],{"class":31,"line":47},[29,171,172],{"class":35},"while",[29,174,175],{"class":43}," (Date.",[29,177,165],{"class":39},[29,179,180],{"class":43},"() ",[29,182,183],{"class":35},"-",[29,185,186],{"class":43}," start ",[29,188,189],{"class":35},"\u003C",[29,191,192],{"class":155}," 5000",[29,194,195],{"class":43},") {}\n",[29,197,198],{"class":31,"line":57},[29,199,201],{"class":200},"s0RzX","\u002F\u002F Nothing else runs for five seconds — no clicks, no timers, no rendering.\n",[203,204,205],"warning",{},[15,206,207],{},"\"Blocking the event loop\" is not a metaphor. On the main thread of a browser, a\nlong synchronous loop blocks rendering, input handling and every pending callback.\nThe tab is frozen for the duration, and the browser may offer to kill it.",[133,209,211],{"id":210},"where-async-work-actually-happens","Where async work actually happens",[15,213,214,215,219],{},"The runtime is single-threaded. The ",[216,217,218],"em",{},"environment"," around it is not.",[15,221,222,223,226,227,230],{},"When you call ",[26,224,225],{},"setTimeout",", the timer is not JavaScript — it is the host. When you\ncall ",[26,228,229],{},"fetch",", the network request is handled by the browser's networking stack on\nanother thread. Your callback is simply registered.",[19,232,234],{"className":21,"code":233,"language":23,"meta":24,"style":24},"console.log('1')\nsetTimeout(() => console.log('3'), 0)\nconsole.log('2')\n\u002F\u002F 1, 2, 3\n",[26,235,236,253,281,294],{"__ignoreMap":24},[29,237,238,241,244,247,250],{"class":31,"line":32},[29,239,240],{"class":43},"console.",[29,242,243],{"class":39},"log",[29,245,246],{"class":43},"(",[29,248,249],{"class":53},"'1'",[29,251,252],{"class":43},")\n",[29,254,255,257,260,263,266,268,270,273,276,279],{"class":31,"line":47},[29,256,225],{"class":39},[29,258,259],{"class":43},"(() ",[29,261,262],{"class":35},"=>",[29,264,265],{"class":43}," console.",[29,267,243],{"class":39},[29,269,246],{"class":43},[29,271,272],{"class":53},"'3'",[29,274,275],{"class":43},"), ",[29,277,278],{"class":155},"0",[29,280,252],{"class":43},[29,282,283,285,287,289,292],{"class":31,"line":57},[29,284,240],{"class":43},[29,286,243],{"class":39},[29,288,246],{"class":43},[29,290,291],{"class":53},"'2'",[29,293,252],{"class":43},[29,295,296],{"class":31,"line":63},[29,297,298],{"class":200},"\u002F\u002F 1, 2, 3\n",[15,300,301,303],{},[26,302,225],{}," returns immediately. The callback is queued for later even with a zero\ndelay, because \"later\" means \"once the stack is empty\" — not \"in zero milliseconds\".",[133,305,307],{"id":306},"the-stack-in-a-stack-trace","The stack in a stack trace",[15,309,310],{},"An error captures the stack at the moment it is thrown. In async code, the stack\nyou get is the one at callback time, not at scheduling time:",[19,312,314],{"className":21,"code":313,"language":23,"meta":24,"style":24},"function schedule() {\n  setTimeout(() => {\n    throw new Error('boom')\n  }, 0)\n}\nschedule()\n\u002F\u002F The trace shows the timer callback. `schedule` is long gone.\n",[26,315,316,325,337,355,364,368,375],{"__ignoreMap":24},[29,317,318,320,323],{"class":31,"line":32},[29,319,36],{"class":35},[29,321,322],{"class":39}," schedule",[29,324,44],{"class":43},[29,326,327,330,332,334],{"class":31,"line":47},[29,328,329],{"class":39},"  setTimeout",[29,331,259],{"class":43},[29,333,262],{"class":35},[29,335,336],{"class":43}," {\n",[29,338,339,342,345,348,350,353],{"class":31,"line":57},[29,340,341],{"class":35},"    throw",[29,343,344],{"class":35}," new",[29,346,347],{"class":39}," Error",[29,349,246],{"class":43},[29,351,352],{"class":53},"'boom'",[29,354,252],{"class":43},[29,356,357,360,362],{"class":31,"line":63},[29,358,359],{"class":43},"  }, ",[29,361,278],{"class":155},[29,363,252],{"class":43},[29,365,366],{"class":31,"line":73},[29,367,60],{"class":43},[29,369,370,373],{"class":31,"line":83},[29,371,372],{"class":39},"schedule",[29,374,80],{"class":43},[29,376,377],{"class":31,"line":88},[29,378,379],{"class":200},"\u002F\u002F The trace shows the timer callback. `schedule` is long gone.\n",[15,381,382,383,386,387,390,391,393],{},"Modern engines reconstruct async stack traces across ",[26,384,385],{},"await"," boundaries, which is\none practical reason to prefer ",[26,388,389],{},"async","\u002F",[26,392,385],{}," over raw callbacks.",[395,396,397],"style",{},"html pre.shiki code .sEYkB, html code.shiki .sEYkB{--shiki-default:#F47067;--shiki-dark:#F47067}html pre.shiki code .s-wk_, html code.shiki .s-wk_{--shiki-default:#DCBDFB;--shiki-dark:#DCBDFB}html pre.shiki code .sM9_K, html code.shiki .sM9_K{--shiki-default:#ADBAC7;--shiki-dark:#ADBAC7}html pre.shiki code .szYpP, html code.shiki .szYpP{--shiki-default:#96D0FF;--shiki-dark:#96D0FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sQdni, html code.shiki .sQdni{--shiki-default:#6CB6FF;--shiki-dark:#6CB6FF}html pre.shiki code .s0RzX, html code.shiki .s0RzX{--shiki-default:#768390;--shiki-dark:#768390}",{"title":24,"searchDepth":57,"depth":57,"links":399},[400,401,402],{"id":135,"depth":47,"text":136},{"id":210,"depth":47,"text":211},{"id":306,"depth":47,"text":307},"One thread, one stack, and what \"blocking\" actually blocks.","md","en",{},false,"\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop\u002Fcall-stack",{"title":5,"description":403},"learn\u002Fen\u002Fcourses\u002Fevent-loop\u002F01.call-stack","BiJN8dMZjgvIkocYL4WlAg539TRcbZZHnuwy9Hi7GFg",{"id":413,"title":414,"access":6,"body":415,"description":419,"draft":407,"estimatedMinutes":420,"extension":404,"featured":115,"icon":421,"lang":405,"level":422,"meta":423,"navigation":115,"order":32,"path":424,"prerequisites":425,"resources":426,"seo":431,"sku":432,"stem":433,"subjects":434,"summary":436,"tags":437,"updated":441,"__hash__":442},"courses\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop\u002Findex.md","The event loop",{"type":8,"value":416,"toc":417},[],{"title":24,"searchDepth":57,"depth":57,"links":418},[],"Call stack, task queues and microtasks — why your code ran in that order.",30,"lucide:workflow","intermediate",{},"\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop",[],[427],{"label":428,"file":429,"access":6,"size":430},"Event loop reference card","js-event-loop-card.pdf","95 KB",{"title":414,"description":419},null,"learn\u002Fen\u002Fcourses\u002Fevent-loop\u002Findex",[435],"javascript","JavaScript runs on one thread with one call stack. Anything asynchronous is\nhanded to the host environment, which puts a callback in a queue when it is\nready. The event loop moves work from those queues onto the stack, but only\nwhen the stack is empty. Microtasks — promise continuations — drain completely\nbetween each task, which is why an await resolves before a setTimeout of zero.\nAlmost every ordering surprise in JavaScript follows from those rules.\n",[389,438,439,440],"promises","runtime","concurrency","2026-08-05","BOC7v_GWQoKJp-mEK6X_H0pY-0KcxkhIWnXKWsm8c9k",[444,728],{"id":4,"title":5,"access":6,"body":445,"description":403,"extension":404,"lang":405,"meta":726,"navigation":115,"order":32,"partial":407,"path":408,"seo":727,"stem":410,"__hash__":411},{"type":8,"value":446,"toc":721},[447,449,451,523,527,529,531,533,575,579,581,585,591,645,649,651,653,711,719],[11,448,5],{"id":13},[15,450,17],{},[19,452,453],{"className":21,"code":22,"language":23,"meta":24,"style":24},[26,454,455,463,469,473,481,489,493,501,509,513,517],{"__ignoreMap":24},[29,456,457,459,461],{"class":31,"line":32},[29,458,36],{"class":35},[29,460,40],{"class":39},[29,462,44],{"class":43},[29,464,465,467],{"class":31,"line":47},[29,466,50],{"class":35},[29,468,54],{"class":53},[29,470,471],{"class":31,"line":57},[29,472,60],{"class":43},[29,474,475,477,479],{"class":31,"line":63},[29,476,36],{"class":35},[29,478,68],{"class":39},[29,480,44],{"class":43},[29,482,483,485,487],{"class":31,"line":73},[29,484,50],{"class":35},[29,486,40],{"class":39},[29,488,80],{"class":43},[29,490,491],{"class":31,"line":83},[29,492,60],{"class":43},[29,494,495,497,499],{"class":31,"line":88},[29,496,36],{"class":35},[29,498,93],{"class":39},[29,500,44],{"class":43},[29,502,503,505,507],{"class":31,"line":98},[29,504,50],{"class":35},[29,506,68],{"class":39},[29,508,80],{"class":43},[29,510,511],{"class":31,"line":107},[29,512,60],{"class":43},[29,514,515],{"class":31,"line":112},[29,516,116],{"emptyLinePlaceholder":115},[29,518,519,521],{"class":31,"line":119},[29,520,122],{"class":39},[29,522,80],{"class":43},[15,524,127,525,131],{},[26,526,130],{},[133,528,136],{"id":135},[15,530,139],{},[15,532,142],{},[19,534,535],{"className":21,"code":145,"language":23,"meta":24,"style":24},[26,536,537,551,571],{"__ignoreMap":24},[29,538,539,541,543,545,547,549],{"class":31,"line":32},[29,540,152],{"class":35},[29,542,156],{"class":155},[29,544,159],{"class":35},[29,546,162],{"class":43},[29,548,165],{"class":39},[29,550,80],{"class":43},[29,552,553,555,557,559,561,563,565,567,569],{"class":31,"line":47},[29,554,172],{"class":35},[29,556,175],{"class":43},[29,558,165],{"class":39},[29,560,180],{"class":43},[29,562,183],{"class":35},[29,564,186],{"class":43},[29,566,189],{"class":35},[29,568,192],{"class":155},[29,570,195],{"class":43},[29,572,573],{"class":31,"line":57},[29,574,201],{"class":200},[203,576,577],{},[15,578,207],{},[133,580,211],{"id":210},[15,582,214,583,219],{},[216,584,218],{},[15,586,222,587,226,589,230],{},[26,588,225],{},[26,590,229],{},[19,592,593],{"className":21,"code":233,"language":23,"meta":24,"style":24},[26,594,595,607,629,641],{"__ignoreMap":24},[29,596,597,599,601,603,605],{"class":31,"line":32},[29,598,240],{"class":43},[29,600,243],{"class":39},[29,602,246],{"class":43},[29,604,249],{"class":53},[29,606,252],{"class":43},[29,608,609,611,613,615,617,619,621,623,625,627],{"class":31,"line":47},[29,610,225],{"class":39},[29,612,259],{"class":43},[29,614,262],{"class":35},[29,616,265],{"class":43},[29,618,243],{"class":39},[29,620,246],{"class":43},[29,622,272],{"class":53},[29,624,275],{"class":43},[29,626,278],{"class":155},[29,628,252],{"class":43},[29,630,631,633,635,637,639],{"class":31,"line":57},[29,632,240],{"class":43},[29,634,243],{"class":39},[29,636,246],{"class":43},[29,638,291],{"class":53},[29,640,252],{"class":43},[29,642,643],{"class":31,"line":63},[29,644,298],{"class":200},[15,646,647,303],{},[26,648,225],{},[133,650,307],{"id":306},[15,652,310],{},[19,654,655],{"className":21,"code":313,"language":23,"meta":24,"style":24},[26,656,657,665,675,689,697,701,707],{"__ignoreMap":24},[29,658,659,661,663],{"class":31,"line":32},[29,660,36],{"class":35},[29,662,322],{"class":39},[29,664,44],{"class":43},[29,666,667,669,671,673],{"class":31,"line":47},[29,668,329],{"class":39},[29,670,259],{"class":43},[29,672,262],{"class":35},[29,674,336],{"class":43},[29,676,677,679,681,683,685,687],{"class":31,"line":57},[29,678,341],{"class":35},[29,680,344],{"class":35},[29,682,347],{"class":39},[29,684,246],{"class":43},[29,686,352],{"class":53},[29,688,252],{"class":43},[29,690,691,693,695],{"class":31,"line":63},[29,692,359],{"class":43},[29,694,278],{"class":155},[29,696,252],{"class":43},[29,698,699],{"class":31,"line":73},[29,700,60],{"class":43},[29,702,703,705],{"class":31,"line":83},[29,704,372],{"class":39},[29,706,80],{"class":43},[29,708,709],{"class":31,"line":88},[29,710,379],{"class":200},[15,712,382,713,386,715,390,717,393],{},[26,714,385],{},[26,716,389],{},[26,718,385],{},[395,720,397],{},{"title":24,"searchDepth":57,"depth":57,"links":722},[723,724,725],{"id":135,"depth":47,"text":136},{"id":210,"depth":47,"text":211},{"id":306,"depth":47,"text":307},{},{"title":5,"description":403},{"id":729,"title":730,"access":6,"body":731,"description":1153,"extension":404,"lang":405,"meta":1154,"navigation":115,"order":47,"partial":407,"path":1155,"seo":1156,"stem":1157,"__hash__":1158},"lessons\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop\u002F02.task-queues.md","Tasks and microtasks",{"type":8,"value":732,"toc":1147},[733,736,739,796,800,808,932,935,943,946,950,955,1043,1056,1060,1063,1115,1128,1132,1135,1144],[11,734,730],{"id":735},"tasks-and-microtasks",[15,737,738],{},"There is not one queue. There are two, and they are drained differently.",[740,741,742,758],"table",{},[743,744,745],"thead",{},[746,747,748,752,755],"tr",{},[749,750,751],"th",{},"Queue",[749,753,754],{},"Sources",[749,756,757],{},"Drained",[759,760,761,779],"tbody",{},[746,762,763,767,776],{},[764,765,766],"td",{},"Task (macrotask)",[764,768,769,771,772,775],{},[26,770,225],{},", ",[26,773,774],{},"setInterval",", I\u002FO, events",[764,777,778],{},"One per loop iteration",[746,780,781,784,793],{},[764,782,783],{},"Microtask",[764,785,786,787,771,790],{},"Promise callbacks, ",[26,788,789],{},"queueMicrotask",[26,791,792],{},"MutationObserver",[764,794,795],{},"Completely, after every task",[133,797,799],{"id":798},"the-rule","The rule",[15,801,802,803,807],{},"After the stack empties, the event loop drains ",[804,805,806],"strong",{},"the entire microtask queue"," before\ntaking the next task. Microtasks added while draining are also processed in the same\npass.",[19,809,811],{"className":21,"code":810,"language":23,"meta":24,"style":24},"console.log('script start')\n\nsetTimeout(() => console.log('timeout'), 0)\n\nPromise.resolve()\n  .then(() => console.log('promise 1'))\n  .then(() => console.log('promise 2'))\n\nconsole.log('script end')\n",[26,812,813,826,830,853,857,870,894,915,919],{"__ignoreMap":24},[29,814,815,817,819,821,824],{"class":31,"line":32},[29,816,240],{"class":43},[29,818,243],{"class":39},[29,820,246],{"class":43},[29,822,823],{"class":53},"'script start'",[29,825,252],{"class":43},[29,827,828],{"class":31,"line":47},[29,829,116],{"emptyLinePlaceholder":115},[29,831,832,834,836,838,840,842,844,847,849,851],{"class":31,"line":57},[29,833,225],{"class":39},[29,835,259],{"class":43},[29,837,262],{"class":35},[29,839,265],{"class":43},[29,841,243],{"class":39},[29,843,246],{"class":43},[29,845,846],{"class":53},"'timeout'",[29,848,275],{"class":43},[29,850,278],{"class":155},[29,852,252],{"class":43},[29,854,855],{"class":31,"line":63},[29,856,116],{"emptyLinePlaceholder":115},[29,858,859,862,865,868],{"class":31,"line":73},[29,860,861],{"class":155},"Promise",[29,863,864],{"class":43},".",[29,866,867],{"class":39},"resolve",[29,869,80],{"class":43},[29,871,872,875,878,880,882,884,886,888,891],{"class":31,"line":83},[29,873,874],{"class":43},"  .",[29,876,877],{"class":39},"then",[29,879,259],{"class":43},[29,881,262],{"class":35},[29,883,265],{"class":43},[29,885,243],{"class":39},[29,887,246],{"class":43},[29,889,890],{"class":53},"'promise 1'",[29,892,893],{"class":43},"))\n",[29,895,896,898,900,902,904,906,908,910,913],{"class":31,"line":88},[29,897,874],{"class":43},[29,899,877],{"class":39},[29,901,259],{"class":43},[29,903,262],{"class":35},[29,905,265],{"class":43},[29,907,243],{"class":39},[29,909,246],{"class":43},[29,911,912],{"class":53},"'promise 2'",[29,914,893],{"class":43},[29,916,917],{"class":31,"line":98},[29,918,116],{"emptyLinePlaceholder":115},[29,920,921,923,925,927,930],{"class":31,"line":107},[29,922,240],{"class":43},[29,924,243],{"class":39},[29,926,246],{"class":43},[29,928,929],{"class":53},"'script end'",[29,931,252],{"class":43},[15,933,934],{},"Output:",[19,936,941],{"className":937,"code":939,"language":940,"meta":24},[938],"language-text","script start\nscript end\npromise 1\npromise 2\ntimeout\n","text",[26,942,939],{"__ignoreMap":24},[15,944,945],{},"Both promise callbacks run before the timeout, even though the timeout was scheduled\nfirst. They are microtasks; the timeout is a task.",[133,947,949],{"id":948},"await-is-a-microtask-boundary","await is a microtask boundary",[15,951,952,954],{},[26,953,385],{}," suspends the function and schedules the remainder as a promise continuation:",[19,956,958],{"className":21,"code":957,"language":23,"meta":24,"style":24},"async function run() {\n  console.log('a')\n  await null \u002F\u002F still a microtask, even awaiting a non-promise\n  console.log('c')\n}\n\nrun()\nconsole.log('b')\n\u002F\u002F a, b, c\n",[26,959,960,972,986,997,1010,1014,1018,1025,1038],{"__ignoreMap":24},[29,961,962,964,967,970],{"class":31,"line":32},[29,963,389],{"class":35},[29,965,966],{"class":35}," function",[29,968,969],{"class":39}," run",[29,971,44],{"class":43},[29,973,974,977,979,981,984],{"class":31,"line":47},[29,975,976],{"class":43},"  console.",[29,978,243],{"class":39},[29,980,246],{"class":43},[29,982,983],{"class":53},"'a'",[29,985,252],{"class":43},[29,987,988,991,994],{"class":31,"line":57},[29,989,990],{"class":35},"  await",[29,992,993],{"class":155}," null",[29,995,996],{"class":200}," \u002F\u002F still a microtask, even awaiting a non-promise\n",[29,998,999,1001,1003,1005,1008],{"class":31,"line":63},[29,1000,976],{"class":43},[29,1002,243],{"class":39},[29,1004,246],{"class":43},[29,1006,1007],{"class":53},"'c'",[29,1009,252],{"class":43},[29,1011,1012],{"class":31,"line":73},[29,1013,60],{"class":43},[29,1015,1016],{"class":31,"line":83},[29,1017,116],{"emptyLinePlaceholder":115},[29,1019,1020,1023],{"class":31,"line":88},[29,1021,1022],{"class":39},"run",[29,1024,80],{"class":43},[29,1026,1027,1029,1031,1033,1036],{"class":31,"line":98},[29,1028,240],{"class":43},[29,1030,243],{"class":39},[29,1032,246],{"class":43},[29,1034,1035],{"class":53},"'b'",[29,1037,252],{"class":43},[29,1039,1040],{"class":31,"line":107},[29,1041,1042],{"class":200},"\u002F\u002F a, b, c\n",[15,1044,1045,1048,1049,1051,1052,1055],{},[26,1046,1047],{},"await null"," does not skip the queue. Everything after the ",[26,1050,385],{}," becomes a\nmicrotask, so the synchronous ",[26,1053,1054],{},"console.log('b')"," runs first.",[133,1057,1059],{"id":1058},"starving-the-loop","Starving the loop",[15,1061,1062],{},"Because microtasks drain completely, a microtask that schedules another microtask\nforever prevents any task from ever running:",[19,1064,1066],{"className":21,"code":1065,"language":23,"meta":24,"style":24},"function spin() {\n  Promise.resolve().then(spin)\n}\nspin()\n\u002F\u002F Timers never fire. Rendering never happens. The page is frozen —\n\u002F\u002F but the CPU profile looks like idle promise work, not a busy loop.\n",[26,1067,1068,1077,1094,1098,1105,1110],{"__ignoreMap":24},[29,1069,1070,1072,1075],{"class":31,"line":32},[29,1071,36],{"class":35},[29,1073,1074],{"class":39}," spin",[29,1076,44],{"class":43},[29,1078,1079,1082,1084,1086,1089,1091],{"class":31,"line":47},[29,1080,1081],{"class":155},"  Promise",[29,1083,864],{"class":43},[29,1085,867],{"class":39},[29,1087,1088],{"class":43},"().",[29,1090,877],{"class":39},[29,1092,1093],{"class":43},"(spin)\n",[29,1095,1096],{"class":31,"line":57},[29,1097,60],{"class":43},[29,1099,1100,1103],{"class":31,"line":63},[29,1101,1102],{"class":39},"spin",[29,1104,80],{"class":43},[29,1106,1107],{"class":31,"line":73},[29,1108,1109],{"class":200},"\u002F\u002F Timers never fire. Rendering never happens. The page is frozen —\n",[29,1111,1112],{"class":31,"line":83},[29,1113,1114],{"class":200},"\u002F\u002F but the CPU profile looks like idle promise work, not a busy loop.\n",[1116,1117,1118],"danger",{},[15,1119,1120,1121,1124,1125,1127],{},"This is worse than a ",[26,1122,1123],{},"while (true)"," loop, because it is harder to spot. The stack is\nshallow, each individual microtask is fast, and nothing looks obviously wrong. Use\n",[26,1126,225],{}," rather than promise recursion for anything that repeats indefinitely.",[133,1129,1131],{"id":1130},"rendering","Rendering",[15,1133,1134],{},"In a browser, rendering is neither a task nor a microtask — it happens between\ntasks, at most once per frame. Since microtasks drain before rendering, a long\nmicrotask chain delays paint just as effectively as blocking code.",[1136,1137,1138],"tip",{},[15,1139,1140,1143],{},[26,1141,1142],{},"requestAnimationFrame"," callbacks run just before paint, after microtasks. That is\nthe correct place for visual updates, and the wrong place for anything expensive.",[395,1145,1146],{},"html pre.shiki code .sM9_K, html code.shiki .sM9_K{--shiki-default:#ADBAC7;--shiki-dark:#ADBAC7}html pre.shiki code .s-wk_, html code.shiki .s-wk_{--shiki-default:#DCBDFB;--shiki-dark:#DCBDFB}html pre.shiki code .szYpP, html code.shiki .szYpP{--shiki-default:#96D0FF;--shiki-dark:#96D0FF}html pre.shiki code .sEYkB, html code.shiki .sEYkB{--shiki-default:#F47067;--shiki-dark:#F47067}html pre.shiki code .sQdni, html code.shiki .sQdni{--shiki-default:#6CB6FF;--shiki-dark:#6CB6FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s0RzX, html code.shiki .s0RzX{--shiki-default:#768390;--shiki-dark:#768390}",{"title":24,"searchDepth":57,"depth":57,"links":1148},[1149,1150,1151,1152],{"id":798,"depth":47,"text":799},{"id":948,"depth":47,"text":949},{"id":1058,"depth":47,"text":1059},{"id":1130,"depth":47,"text":1131},"Two queues, different draining rules, and the ordering that follows.",{},"\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop\u002Ftask-queues",{"title":730,"description":1153},"learn\u002Fen\u002Fcourses\u002Fevent-loop\u002F02.task-queues","Jzwld-KwT30H_KYGrTndaDQB3plJFyiXJ-0rWZCopTQ",{"id":413,"title":414,"access":6,"body":1160,"description":419,"draft":407,"estimatedMinutes":420,"extension":404,"featured":115,"icon":421,"lang":405,"level":422,"meta":1164,"navigation":115,"order":32,"path":424,"prerequisites":1165,"resources":1166,"seo":1168,"sku":432,"stem":433,"subjects":1169,"summary":436,"tags":1170,"updated":441,"__hash__":442},{"type":8,"value":1161,"toc":1162},[],{"title":24,"searchDepth":57,"depth":57,"links":1163},[],{},[],[1167],{"label":428,"file":429,"access":6,"size":430},{"title":414,"description":419},[435],[389,438,439,440],{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1174},0,24,"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"\u002F>",{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1176},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m21 21l-4.34-4.34\"\u002F>\u003Ccircle cx=\"11\" cy=\"11\" r=\"8\"\u002F>\u003C\u002Fg>",{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1178},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"4\"\u002F>\u003Cpath d=\"M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"\u002F>\u003C\u002Fg>",{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1180},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\"\u002F>",{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1182},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 5h16M4 12h16M4 19h16\"\u002F>",{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1184},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\u002F>\u003Cpath d=\"M9 3v18\"\u002F>\u003C\u002Fg>",{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1186},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m9 18l6-6l-6-6\"\u002F>",{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1188},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14m-7-7l7 7l-7 7\"\u002F>",{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1190},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m15 10l5 5l-5 5\"\u002F>\u003Cpath d=\"M4 4v7a4 4 0 0 0 4 4h12\"\u002F>\u003C\u002Fg>",{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1192},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7\"\u002F>\u003Crect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\u002F>\u003C\u002Fg>",{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1194},"\u003Cpath fill=\"currentColor\" d=\"M14.234 10.162L22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299l-.929-1.329L3.076 1.56h3.182l5.965 8.532l.929 1.329l7.754 11.09h-3.182z\"\u002F>",{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1196,"hidden":115},"\u003Cpath fill=\"currentColor\" d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z\"\u002F>",{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1198},"\u003Cpath fill=\"currentColor\" d=\"M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12s-5.385 12-12 12m10.12-10.358c-.35-.11-3.17-.953-6.384-.438c1.34 3.684 1.887 6.684 1.992 7.308a10.28 10.28 0 0 0 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4a10.16 10.16 0 0 0 6.29 2.166c1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765q.202-.067.405-.12q-.392-.879-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248a66 66 0 0 0-3.8-5.928a10.28 10.28 0 0 0-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6c3.645-1.365 5.19-3.44 5.373-3.702A10.2 10.2 0 0 0 12 1.764c-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04c.24.49.47.985.68 1.486c.08.18.15.36.22.53c3.41-.43 6.8.26 7.14.33c-.02-2.42-.88-4.64-2.31-6.38z\"\u002F>",{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1200},"\u003Cpath fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\u002F>",{"course":424},{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1203},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"8\" height=\"8\" x=\"3\" y=\"3\" rx=\"2\"\u002F>\u003Cpath d=\"M7 11v4a2 2 0 0 0 2 2h4\"\u002F>\u003Crect width=\"8\" height=\"8\" x=\"13\" y=\"13\" rx=\"2\"\u002F>\u003C\u002Fg>",{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1205},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M21.801 10A10 10 0 1 1 17 3.335\"\u002F>\u003Cpath d=\"m9 11l3 3L22 4\"\u002F>\u003C\u002Fg>",{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1207},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6\"\u002F>\u003Crect width=\"12\" height=\"8\" x=\"6\" y=\"14\" rx=\"1\"\u002F>\u003C\u002Fg>",{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1209},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0zM22 10v6\"\u002F>\u003Cpath d=\"M6 12.5V16a6 3 0 0 0 12 0v-3.5\"\u002F>\u003C\u002Fg>",{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1211},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M10 2v8l3-3l3 3V2\"\u002F>\u003Cpath d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20\"\u002F>\u003C\u002Fg>",{"left":1172,"top":1172,"width":1173,"height":1173,"rotate":1172,"vFlip":407,"hFlip":407,"body":1213},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4M2 6h4m-4 4h4m-4 4h4m-4 4h4\"\u002F>\u003Cpath d=\"M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z\"\u002F>\u003C\u002Fg>",1787597895538]