[{"data":1,"prerenderedAt":1051},["ShallowReactive",2],{"i-lucide:chevron-down":3,"i-lucide:search":8,"i-lucide:sun":10,"i-lucide:moon":12,"i-lucide:arrow-right":14,"i-lucide:menu":16,"i-lucide:panel-left":18,"i-lucide:mail":20,"i-simple-icons:x":22,"i-simple-icons:linkedin":24,"i-simple-icons:dribbble":27,"i-simple-icons:github":29,"i-lucide:arrow-up-right":31,"sidebar-course-\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop":33,"learn-topic-\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop":72,"prereq-":84,"sidebar-quiz-\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop":85,"lessons-\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop":86,"i-lucide:book-marked":917,"i-lucide:notebook-pen":919,"i-lucide:workflow":921,"i-lucide:circle-check-big":923,"i-lucide:printer":925,"i-lucide:graduation-cap":927,"learn-quiz-\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop":929,"i-lucide:chevron-right":1031,"i-simple-icons:javascript":1033,"i-lucide:clock":1035,"i-lucide:lock-open":1037,"i-lucide:calendar":1039,"i-lucide:link":1041,"i-lucide:scroll-text":1043,"i-lucide:book-open":1045,"i-lucide:download":1047,"i-lucide:file-down":1049},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\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":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\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":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\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":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14m-7-7l7 7l-7 7\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":17},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 5h16M4 12h16M4 19h16\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\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":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":21},"\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":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":23},"\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":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":25,"hidden":26},"\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>",true,{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":28},"\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":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":30},"\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>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":32},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h10v10M7 17L17 7\"\u002F>",{"id":34,"title":35,"access":36,"body":37,"description":44,"draft":6,"estimatedMinutes":45,"extension":46,"featured":26,"icon":47,"lang":48,"level":49,"meta":50,"navigation":26,"order":51,"path":52,"prerequisites":53,"resources":54,"seo":59,"sku":60,"stem":61,"subjects":62,"summary":64,"tags":65,"updated":70,"__hash__":71},"courses\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop\u002Findex.md","The event loop","free",{"type":38,"value":39,"toc":40},"minimark",[],{"title":41,"searchDepth":42,"depth":42,"links":43},"",3,[],"Call stack, task queues and microtasks — why your code ran in that order.",30,"md","lucide:workflow","en","intermediate",{},1,"\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop",[],[55],{"label":56,"file":57,"access":36,"size":58},"Event loop reference card","js-event-loop-card.pdf","95 KB",{"title":35,"description":44},null,"learn\u002Fen\u002Fcourses\u002Fevent-loop\u002Findex",[63],"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",[66,67,68,69],"async","promises","runtime","concurrency","2026-08-05","BOC7v_GWQoKJp-mEK6X_H0pY-0KcxkhIWnXKWsm8c9k",{"id":34,"title":35,"access":36,"body":73,"description":44,"draft":6,"estimatedMinutes":45,"extension":46,"featured":26,"icon":47,"lang":48,"level":49,"meta":77,"navigation":26,"order":51,"path":52,"prerequisites":78,"resources":79,"seo":81,"sku":60,"stem":61,"subjects":82,"summary":64,"tags":83,"updated":70,"__hash__":71},{"type":38,"value":74,"toc":75},[],{"title":41,"searchDepth":42,"depth":42,"links":76},[],{},[],[80],{"label":56,"file":57,"access":36,"size":58},{"title":35,"description":44},[63],[66,67,68,69],[],{"course":52},[87,486],{"id":88,"title":89,"access":36,"body":90,"description":480,"extension":46,"lang":48,"meta":481,"navigation":26,"order":51,"partial":6,"path":482,"seo":483,"stem":484,"__hash__":485},"lessons\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop\u002F01.call-stack.md","The call stack",{"type":38,"value":91,"toc":475},[92,96,100,203,210,215,218,221,280,286,290,298,309,377,382,386,389,458,471],[93,94,89],"h1",{"id":95},"the-call-stack",[97,98,99],"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.",[101,102,106],"pre",{"className":103,"code":104,"language":105,"meta":41,"style":41},"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",[107,108,109,125,135,140,150,160,165,175,184,189,195],"code",{"__ignoreMap":41},[110,111,113,117,121],"span",{"class":112,"line":51},"line",[110,114,116],{"class":115},"sEYkB","function",[110,118,120],{"class":119},"s-wk_"," third",[110,122,124],{"class":123},"sM9_K","() {\n",[110,126,128,131],{"class":112,"line":127},2,[110,129,130],{"class":115},"  return",[110,132,134],{"class":133},"szYpP"," 'done'\n",[110,136,137],{"class":112,"line":42},[110,138,139],{"class":123},"}\n",[110,141,143,145,148],{"class":112,"line":142},4,[110,144,116],{"class":115},[110,146,147],{"class":119}," second",[110,149,124],{"class":123},[110,151,153,155,157],{"class":112,"line":152},5,[110,154,130],{"class":115},[110,156,120],{"class":119},[110,158,159],{"class":123},"()\n",[110,161,163],{"class":112,"line":162},6,[110,164,139],{"class":123},[110,166,168,170,173],{"class":112,"line":167},7,[110,169,116],{"class":115},[110,171,172],{"class":119}," first",[110,174,124],{"class":123},[110,176,178,180,182],{"class":112,"line":177},8,[110,179,130],{"class":115},[110,181,147],{"class":119},[110,183,159],{"class":123},[110,185,187],{"class":112,"line":186},9,[110,188,139],{"class":123},[110,190,192],{"class":112,"line":191},10,[110,193,194],{"emptyLinePlaceholder":26},"\n",[110,196,198,201],{"class":112,"line":197},11,[110,199,200],{"class":119},"first",[110,202,159],{"class":123},[97,204,205,206,209],{},"The stack grows to ",[107,207,208],{},"first → second → third",", then unwinds. Nothing interleaves.",[211,212,214],"h2",{"id":213},"run-to-completion-is-a-guarantee","Run-to-completion is a guarantee",[97,216,217],{},"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.",[97,219,220],{},"It is also why one slow function freezes everything:",[101,222,224],{"className":103,"code":223,"language":105,"meta":41,"style":41},"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",[107,225,226,246,274],{"__ignoreMap":41},[110,227,228,231,235,238,241,244],{"class":112,"line":51},[110,229,230],{"class":115},"const",[110,232,234],{"class":233},"sQdni"," start",[110,236,237],{"class":115}," =",[110,239,240],{"class":123}," Date.",[110,242,243],{"class":119},"now",[110,245,159],{"class":123},[110,247,248,251,254,256,259,262,265,268,271],{"class":112,"line":127},[110,249,250],{"class":115},"while",[110,252,253],{"class":123}," (Date.",[110,255,243],{"class":119},[110,257,258],{"class":123},"() ",[110,260,261],{"class":115},"-",[110,263,264],{"class":123}," start ",[110,266,267],{"class":115},"\u003C",[110,269,270],{"class":233}," 5000",[110,272,273],{"class":123},") {}\n",[110,275,276],{"class":112,"line":42},[110,277,279],{"class":278},"s0RzX","\u002F\u002F Nothing else runs for five seconds — no clicks, no timers, no rendering.\n",[281,282,283],"warning",{},[97,284,285],{},"\"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.",[211,287,289],{"id":288},"where-async-work-actually-happens","Where async work actually happens",[97,291,292,293,297],{},"The runtime is single-threaded. The ",[294,295,296],"em",{},"environment"," around it is not.",[97,299,300,301,304,305,308],{},"When you call ",[107,302,303],{},"setTimeout",", the timer is not JavaScript — it is the host. When you\ncall ",[107,306,307],{},"fetch",", the network request is handled by the browser's networking stack on\nanother thread. Your callback is simply registered.",[101,310,312],{"className":103,"code":311,"language":105,"meta":41,"style":41},"console.log('1')\nsetTimeout(() => console.log('3'), 0)\nconsole.log('2')\n\u002F\u002F 1, 2, 3\n",[107,313,314,331,359,372],{"__ignoreMap":41},[110,315,316,319,322,325,328],{"class":112,"line":51},[110,317,318],{"class":123},"console.",[110,320,321],{"class":119},"log",[110,323,324],{"class":123},"(",[110,326,327],{"class":133},"'1'",[110,329,330],{"class":123},")\n",[110,332,333,335,338,341,344,346,348,351,354,357],{"class":112,"line":127},[110,334,303],{"class":119},[110,336,337],{"class":123},"(() ",[110,339,340],{"class":115},"=>",[110,342,343],{"class":123}," console.",[110,345,321],{"class":119},[110,347,324],{"class":123},[110,349,350],{"class":133},"'3'",[110,352,353],{"class":123},"), ",[110,355,356],{"class":233},"0",[110,358,330],{"class":123},[110,360,361,363,365,367,370],{"class":112,"line":42},[110,362,318],{"class":123},[110,364,321],{"class":119},[110,366,324],{"class":123},[110,368,369],{"class":133},"'2'",[110,371,330],{"class":123},[110,373,374],{"class":112,"line":142},[110,375,376],{"class":278},"\u002F\u002F 1, 2, 3\n",[97,378,379,381],{},[107,380,303],{}," 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\".",[211,383,385],{"id":384},"the-stack-in-a-stack-trace","The stack in a stack trace",[97,387,388],{},"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:",[101,390,392],{"className":103,"code":391,"language":105,"meta":41,"style":41},"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",[107,393,394,403,415,433,442,446,453],{"__ignoreMap":41},[110,395,396,398,401],{"class":112,"line":51},[110,397,116],{"class":115},[110,399,400],{"class":119}," schedule",[110,402,124],{"class":123},[110,404,405,408,410,412],{"class":112,"line":127},[110,406,407],{"class":119},"  setTimeout",[110,409,337],{"class":123},[110,411,340],{"class":115},[110,413,414],{"class":123}," {\n",[110,416,417,420,423,426,428,431],{"class":112,"line":42},[110,418,419],{"class":115},"    throw",[110,421,422],{"class":115}," new",[110,424,425],{"class":119}," Error",[110,427,324],{"class":123},[110,429,430],{"class":133},"'boom'",[110,432,330],{"class":123},[110,434,435,438,440],{"class":112,"line":142},[110,436,437],{"class":123},"  }, ",[110,439,356],{"class":233},[110,441,330],{"class":123},[110,443,444],{"class":112,"line":152},[110,445,139],{"class":123},[110,447,448,451],{"class":112,"line":162},[110,449,450],{"class":119},"schedule",[110,452,159],{"class":123},[110,454,455],{"class":112,"line":167},[110,456,457],{"class":278},"\u002F\u002F The trace shows the timer callback. `schedule` is long gone.\n",[97,459,460,461,464,465,467,468,470],{},"Modern engines reconstruct async stack traces across ",[107,462,463],{},"await"," boundaries, which is\none practical reason to prefer ",[107,466,66],{},"\u002F",[107,469,463],{}," over raw callbacks.",[472,473,474],"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":41,"searchDepth":42,"depth":42,"links":476},[477,478,479],{"id":213,"depth":127,"text":214},{"id":288,"depth":127,"text":289},{"id":384,"depth":127,"text":385},"One thread, one stack, and what \"blocking\" actually blocks.",{},"\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop\u002Fcall-stack",{"title":89,"description":480},"learn\u002Fen\u002Fcourses\u002Fevent-loop\u002F01.call-stack","BiJN8dMZjgvIkocYL4WlAg539TRcbZZHnuwy9Hi7GFg",{"id":487,"title":488,"access":36,"body":489,"description":911,"extension":46,"lang":48,"meta":912,"navigation":26,"order":127,"partial":6,"path":913,"seo":914,"stem":915,"__hash__":916},"lessons\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop\u002F02.task-queues.md","Tasks and microtasks",{"type":38,"value":490,"toc":905},[491,494,497,554,558,566,690,693,701,704,708,713,801,814,818,821,873,886,890,893,902],[93,492,488],{"id":493},"tasks-and-microtasks",[97,495,496],{},"There is not one queue. There are two, and they are drained differently.",[498,499,500,516],"table",{},[501,502,503],"thead",{},[504,505,506,510,513],"tr",{},[507,508,509],"th",{},"Queue",[507,511,512],{},"Sources",[507,514,515],{},"Drained",[517,518,519,537],"tbody",{},[504,520,521,525,534],{},[522,523,524],"td",{},"Task (macrotask)",[522,526,527,529,530,533],{},[107,528,303],{},", ",[107,531,532],{},"setInterval",", I\u002FO, events",[522,535,536],{},"One per loop iteration",[504,538,539,542,551],{},[522,540,541],{},"Microtask",[522,543,544,545,529,548],{},"Promise callbacks, ",[107,546,547],{},"queueMicrotask",[107,549,550],{},"MutationObserver",[522,552,553],{},"Completely, after every task",[211,555,557],{"id":556},"the-rule","The rule",[97,559,560,561,565],{},"After the stack empties, the event loop drains ",[562,563,564],"strong",{},"the entire microtask queue"," before\ntaking the next task. Microtasks added while draining are also processed in the same\npass.",[101,567,569],{"className":103,"code":568,"language":105,"meta":41,"style":41},"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",[107,570,571,584,588,611,615,628,652,673,677],{"__ignoreMap":41},[110,572,573,575,577,579,582],{"class":112,"line":51},[110,574,318],{"class":123},[110,576,321],{"class":119},[110,578,324],{"class":123},[110,580,581],{"class":133},"'script start'",[110,583,330],{"class":123},[110,585,586],{"class":112,"line":127},[110,587,194],{"emptyLinePlaceholder":26},[110,589,590,592,594,596,598,600,602,605,607,609],{"class":112,"line":42},[110,591,303],{"class":119},[110,593,337],{"class":123},[110,595,340],{"class":115},[110,597,343],{"class":123},[110,599,321],{"class":119},[110,601,324],{"class":123},[110,603,604],{"class":133},"'timeout'",[110,606,353],{"class":123},[110,608,356],{"class":233},[110,610,330],{"class":123},[110,612,613],{"class":112,"line":142},[110,614,194],{"emptyLinePlaceholder":26},[110,616,617,620,623,626],{"class":112,"line":152},[110,618,619],{"class":233},"Promise",[110,621,622],{"class":123},".",[110,624,625],{"class":119},"resolve",[110,627,159],{"class":123},[110,629,630,633,636,638,640,642,644,646,649],{"class":112,"line":162},[110,631,632],{"class":123},"  .",[110,634,635],{"class":119},"then",[110,637,337],{"class":123},[110,639,340],{"class":115},[110,641,343],{"class":123},[110,643,321],{"class":119},[110,645,324],{"class":123},[110,647,648],{"class":133},"'promise 1'",[110,650,651],{"class":123},"))\n",[110,653,654,656,658,660,662,664,666,668,671],{"class":112,"line":167},[110,655,632],{"class":123},[110,657,635],{"class":119},[110,659,337],{"class":123},[110,661,340],{"class":115},[110,663,343],{"class":123},[110,665,321],{"class":119},[110,667,324],{"class":123},[110,669,670],{"class":133},"'promise 2'",[110,672,651],{"class":123},[110,674,675],{"class":112,"line":177},[110,676,194],{"emptyLinePlaceholder":26},[110,678,679,681,683,685,688],{"class":112,"line":186},[110,680,318],{"class":123},[110,682,321],{"class":119},[110,684,324],{"class":123},[110,686,687],{"class":133},"'script end'",[110,689,330],{"class":123},[97,691,692],{},"Output:",[101,694,699],{"className":695,"code":697,"language":698,"meta":41},[696],"language-text","script start\nscript end\npromise 1\npromise 2\ntimeout\n","text",[107,700,697],{"__ignoreMap":41},[97,702,703],{},"Both promise callbacks run before the timeout, even though the timeout was scheduled\nfirst. They are microtasks; the timeout is a task.",[211,705,707],{"id":706},"await-is-a-microtask-boundary","await is a microtask boundary",[97,709,710,712],{},[107,711,463],{}," suspends the function and schedules the remainder as a promise continuation:",[101,714,716],{"className":103,"code":715,"language":105,"meta":41,"style":41},"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",[107,717,718,730,744,755,768,772,776,783,796],{"__ignoreMap":41},[110,719,720,722,725,728],{"class":112,"line":51},[110,721,66],{"class":115},[110,723,724],{"class":115}," function",[110,726,727],{"class":119}," run",[110,729,124],{"class":123},[110,731,732,735,737,739,742],{"class":112,"line":127},[110,733,734],{"class":123},"  console.",[110,736,321],{"class":119},[110,738,324],{"class":123},[110,740,741],{"class":133},"'a'",[110,743,330],{"class":123},[110,745,746,749,752],{"class":112,"line":42},[110,747,748],{"class":115},"  await",[110,750,751],{"class":233}," null",[110,753,754],{"class":278}," \u002F\u002F still a microtask, even awaiting a non-promise\n",[110,756,757,759,761,763,766],{"class":112,"line":142},[110,758,734],{"class":123},[110,760,321],{"class":119},[110,762,324],{"class":123},[110,764,765],{"class":133},"'c'",[110,767,330],{"class":123},[110,769,770],{"class":112,"line":152},[110,771,139],{"class":123},[110,773,774],{"class":112,"line":162},[110,775,194],{"emptyLinePlaceholder":26},[110,777,778,781],{"class":112,"line":167},[110,779,780],{"class":119},"run",[110,782,159],{"class":123},[110,784,785,787,789,791,794],{"class":112,"line":177},[110,786,318],{"class":123},[110,788,321],{"class":119},[110,790,324],{"class":123},[110,792,793],{"class":133},"'b'",[110,795,330],{"class":123},[110,797,798],{"class":112,"line":186},[110,799,800],{"class":278},"\u002F\u002F a, b, c\n",[97,802,803,806,807,809,810,813],{},[107,804,805],{},"await null"," does not skip the queue. Everything after the ",[107,808,463],{}," becomes a\nmicrotask, so the synchronous ",[107,811,812],{},"console.log('b')"," runs first.",[211,815,817],{"id":816},"starving-the-loop","Starving the loop",[97,819,820],{},"Because microtasks drain completely, a microtask that schedules another microtask\nforever prevents any task from ever running:",[101,822,824],{"className":103,"code":823,"language":105,"meta":41,"style":41},"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",[107,825,826,835,852,856,863,868],{"__ignoreMap":41},[110,827,828,830,833],{"class":112,"line":51},[110,829,116],{"class":115},[110,831,832],{"class":119}," spin",[110,834,124],{"class":123},[110,836,837,840,842,844,847,849],{"class":112,"line":127},[110,838,839],{"class":233},"  Promise",[110,841,622],{"class":123},[110,843,625],{"class":119},[110,845,846],{"class":123},"().",[110,848,635],{"class":119},[110,850,851],{"class":123},"(spin)\n",[110,853,854],{"class":112,"line":42},[110,855,139],{"class":123},[110,857,858,861],{"class":112,"line":142},[110,859,860],{"class":119},"spin",[110,862,159],{"class":123},[110,864,865],{"class":112,"line":152},[110,866,867],{"class":278},"\u002F\u002F Timers never fire. Rendering never happens. The page is frozen —\n",[110,869,870],{"class":112,"line":162},[110,871,872],{"class":278},"\u002F\u002F but the CPU profile looks like idle promise work, not a busy loop.\n",[874,875,876],"danger",{},[97,877,878,879,882,883,885],{},"This is worse than a ",[107,880,881],{},"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",[107,884,303],{}," rather than promise recursion for anything that repeats indefinitely.",[211,887,889],{"id":888},"rendering","Rendering",[97,891,892],{},"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.",[894,895,896],"tip",{},[97,897,898,901],{},[107,899,900],{},"requestAnimationFrame"," callbacks run just before paint, after microtasks. That is\nthe correct place for visual updates, and the wrong place for anything expensive.",[472,903,904],{},"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":41,"searchDepth":42,"depth":42,"links":906},[907,908,909,910],{"id":556,"depth":127,"text":557},{"id":706,"depth":127,"text":707},{"id":816,"depth":127,"text":817},{"id":888,"depth":127,"text":889},"Two queues, different draining rules, and the ordering that follows.",{},"\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop\u002Ftask-queues",{"title":488,"description":911},"learn\u002Fen\u002Fcourses\u002Fevent-loop\u002F02.task-queues","Jzwld-KwT30H_KYGrTndaDQB3plJFyiXJ-0rWZCopTQ",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":918},"\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":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":920},"\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>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":922},"\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":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":924},"\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":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":926},"\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":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":928},"\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>",{"id":930,"title":35,"course":52,"description":931,"extension":932,"lang":48,"meta":933,"passingScore":934,"questions":935,"shuffle":26,"stem":1029,"__hash__":1030},"quizzes\u002Flearn\u002Fen\u002Fcourses\u002Fevent-loop\u002Fquiz.yml","Six questions on ordering, queues and blocking.","yml",{},70,[936,956,972,987,1001,1015],{"id":937,"question":938,"type":939,"difficulty":940,"options":941,"correct":954,"explanation":955},"order-basic","What does this print? console.log('1'); setTimeout(() => console.log('3'), 0); console.log('2')","single","easy",[942,945,948,951],{"id":943,"text":944},"a","1, 2, 3",{"id":946,"text":947},"b","1, 3, 2",{"id":949,"text":950},"c","3, 1, 2",{"id":952,"text":953},"d","The order is not deterministic",[943],"setTimeout queues a task regardless of the delay. Tasks only run once the stack is empty, so both synchronous logs happen first.\n",{"id":957,"question":958,"type":959,"difficulty":960,"options":961,"correct":970,"explanation":971},"micro-vs-macro","Which of these schedule microtasks rather than tasks?","multiple","medium",[962,964,966,968],{"id":943,"text":963},"Promise.resolve().then(fn)",{"id":946,"text":965},"queueMicrotask(fn)",{"id":949,"text":967},"setTimeout(fn, 0)",{"id":952,"text":969},"The continuation after an await",[943,946,952],"Promise continuations, queueMicrotask and everything after an await are microtasks. setTimeout always queues a task, even with a zero delay.\n",{"id":973,"question":974,"type":939,"difficulty":975,"options":976,"correct":985,"explanation":986},"await-null","Does `await null` yield to the microtask queue?","hard",[977,979,981,983],{"id":943,"text":978},"No — awaiting a non-promise resolves synchronously",{"id":946,"text":980},"Yes — the rest of the function becomes a microtask either way",{"id":949,"text":982},"Only in strict mode",{"id":952,"text":984},"Only if the function was called from another async function",[946],"await always suspends. The value is wrapped and the remainder of the function is scheduled as a promise continuation, non-promise operand or not.\n",{"id":988,"question":989,"type":939,"difficulty":960,"options":990,"correct":999,"explanation":1000},"drain-rule","How much of the microtask queue is drained between two tasks?",[991,993,995,997],{"id":943,"text":992},"One microtask",{"id":946,"text":994},"All of it, including microtasks added during the drain",{"id":949,"text":996},"All of it, but newly added ones wait for the next pass",{"id":952,"text":998},"As many as fit in the current frame budget",[946],"The queue is drained to empty. Microtasks enqueued while draining join the same pass, which is what makes infinite microtask recursion able to starve the loop entirely.\n",{"id":1002,"question":1003,"type":939,"difficulty":975,"options":1004,"correct":1013,"explanation":1014},"starvation","Why is infinite promise recursion harder to diagnose than a while(true) loop?",[1005,1007,1009,1011],{"id":943,"text":1006},"It only reproduces under load",{"id":946,"text":1008},"The stack stays shallow and each microtask completes quickly",{"id":949,"text":1010},"Browsers suppress errors inside promises",{"id":952,"text":1012},"It does not actually block rendering",[946],"Each individual microtask returns immediately and the stack never grows, so nothing looks stuck — but the queue never empties, so no task or paint ever runs.\n",{"id":1016,"question":1017,"type":939,"difficulty":960,"options":1018,"correct":1027,"explanation":1028},"raf","When do requestAnimationFrame callbacks run?",[1019,1021,1023,1025],{"id":943,"text":1020},"Before microtasks are drained",{"id":946,"text":1022},"After microtasks, just before paint",{"id":949,"text":1024},"At the same priority as setTimeout(fn, 16)",{"id":952,"text":1026},"On a separate thread from the main loop",[946],"rAF callbacks run in the rendering step, after the microtask queue has drained, immediately before the browser paints the frame.\n","learn\u002Fen\u002Fcourses\u002Fevent-loop\u002Fquiz","5l1vwZesuivBxzEwvXYasWr9Nz10Iq2OmAFu7gZH1E4",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1032},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m9 18l6-6l-6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1034},"\u003Cpath fill=\"currentColor\" d=\"M0 0h24v24H0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873c-.736-.345-1.554-.585-1.797-1.14c-.091-.33-.105-.51-.046-.705c.15-.646.915-.84 1.515-.66c.39.12.75.42.976.9c1.034-.676 1.034-.676 1.755-1.125c-.27-.42-.404-.601-.586-.78c-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005c-1.14 1.291-.811 3.541.569 4.471c1.365 1.02 3.361 1.244 3.616 2.205c.24 1.17-.87 1.545-1.966 1.41c-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109c1.74 1.756 6.09 1.666 6.871-1.004c.029-.09.24-.705.074-1.65zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805c0 1.232.063 2.363-.138 2.711c-.33.689-1.18.601-1.566.48c-.396-.196-.597-.466-.83-.855c-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517c.855.51 2.004.675 3.207.405c.783-.226 1.458-.691 1.811-1.411c.51-.93.402-2.07.397-3.346c.012-2.054 0-4.109 0-6.179z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1036},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"M12 6v6l4 2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1038},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\"\u002F>\u003Cpath d=\"M7 11V7a5 5 0 0 1 9.9-1\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1040},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M8 2v3m8-3v3\"\u002F>\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\u002F>\u003Cpath d=\"M3 9h18\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1042},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"\u002F>\u003Cpath d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1044},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M15 12h-5m5-4h-5m9 9V5a2 2 0 0 0-2-2H4\"\u002F>\u003Cpath d=\"M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1046},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 5v16m8.001-2A2 2 0 0 0 22 17V5a2 2 0 0 0-1.999-2L16 3.002A5 5 0 0 0 12 5a5 5 0 0 0-4-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 1.999 2H8a5 5 0 0 1 4 2a5 5 0 0 1 4-2z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1048},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M12 15V3m9 12v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\u002F>\u003Cpath d=\"m7 10l5 5l5-5\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1050},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\"\u002F>\u003Cpath d=\"M14 2v5a1 1 0 0 0 1 1h5m-8 10v-6m-3 3l3 3l3-3\"\u002F>\u003C\u002Fg>",1791742738433]