<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Intuitively — All languages</title><description>English and Vietnamese notes on building, debugging, and understanding software.</description><link>https://intuitively.pages.dev/</link><language>en, vi</language><item><title>The event loop finally clicked when I stopped calling it a loop</title><link>https://intuitively.pages.dev/en/articles/understanding-the-event-loop/</link><guid isPermaLink="true">https://intuitively.pages.dev/en/articles/understanding-the-event-loop/</guid><description>A practical mental model for tasks, microtasks, and why asynchronous JavaScript runs in the order it does.</description><pubDate>Tue, 18 Aug 2026 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;The event loop is often explained as a small circle that continuously checks a queue. That picture is useful, but it hides the part that matters most: &lt;strong&gt;JavaScript runs jobs to completion, and the host decides when another job may begin.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Once I started thinking in terms of &lt;em&gt;turns&lt;/em&gt; instead of a literal spinning loop, ordering became much easier to predict.&lt;/p&gt;
&lt;h2 id=&quot;a-turn-drawn-plainly&quot;&gt;A turn, drawn plainly&lt;/h2&gt;
&lt;picture&gt;&lt;source height=&quot;70&quot; id=&quot;mermaid-dark-0&quot; media=&quot;(prefers-color-scheme: dark)&quot; srcset=&quot;data:image/svg+xml,%3csvg%20id=&amp;#x27;mermaid-dark-0&amp;#x27;%20width=&amp;#x27;100%25&amp;#x27;%20xmlns=&amp;#x27;http://www.w3.org/2000/svg&amp;#x27;%20xmlns:xlink=&amp;#x27;http://www.w3.org/1999/xlink&amp;#x27;%20class=&amp;#x27;flowchart&amp;#x27;%20style=&amp;#x27;max-width:%20704.1875px%3b&amp;#x27;%20viewBox=&amp;#x27;0%200%20704.1875%2070&amp;#x27;%20role=&amp;#x27;graphics-document%20document&amp;#x27;%20aria-roledescription=&amp;#x27;flowchart-v2&amp;#x27;%20aria-describedby=&amp;#x27;chart-desc-mermaid-dark-0&amp;#x27;%20aria-labelledby=&amp;#x27;chart-title-mermaid-dark-0&amp;#x27;%3e%3ctitle%20id=&amp;#x27;chart-title-mermaid-dark-0&amp;#x27;%3eEvent%20loop%20turn%20order%3c/title%3e%3cdesc%20id=&amp;#x27;chart-desc-mermaid-dark-0&amp;#x27;%3eThe%20current%20JavaScript%20job%20finishes%2c%20then%20microtasks%20drain%2c%20and%20then%20the%20host%20selects%20the%20next%20task.%3c/desc%3e%3cstyle%3e%23mermaid-dark-0%7bfont-family:arial%2csans-serif%3bfont-size:16px%3bfill:%23ccc%3b%7d%40keyframes%20edge-animation-frame%7bfrom%7bstroke-dashoffset:0%3b%7d%7d%40keyframes%20dash%7bto%7bstroke-dashoffset:0%3b%7d%7d%23mermaid-dark-0%20.edge-animation-slow%7bstroke-dasharray:9%2c5!important%3bstroke-dashoffset:900%3banimation:dash%2050s%20linear%20infinite%3bstroke-linecap:round%3b%7d%23mermaid-dark-0%20.edge-animation-fast%7bstroke-dasharray:9%2c5!important%3bstroke-dashoffset:900%3banimation:dash%2020s%20linear%20infinite%3bstroke-linecap:round%3b%7d%23mermaid-dark-0%20.error-icon%7bfill:%23a44141%3b%7d%23mermaid-dark-0%20.error-text%7bfill:%23ddd%3bstroke:%23ddd%3b%7d%23mermaid-dark-0%20.edge-thickness-normal%7bstroke-width:1px%3b%7d%23mermaid-dark-0%20.edge-thickness-thick%7bstroke-width:3.5px%3b%7d%23mermaid-dark-0%20.edge-pattern-solid%7bstroke-dasharray:0%3b%7d%23mermaid-dark-0%20.edge-thickness-invisible%7bstroke-width:0%3bfill:none%3b%7d%23mermaid-dark-0%20.edge-pattern-dashed%7bstroke-dasharray:3%3b%7d%23mermaid-dark-0%20.edge-pattern-dotted%7bstroke-dasharray:2%3b%7d%23mermaid-dark-0%20.marker%7bfill:lightgrey%3bstroke:lightgrey%3b%7d%23mermaid-dark-0%20.marker.cross%7bstroke:lightgrey%3b%7d%23mermaid-dark-0%20svg%7bfont-family:arial%2csans-serif%3bfont-size:16px%3b%7d%23mermaid-dark-0%20p%7bmargin:0%3b%7d%23mermaid-dark-0%20.label%7bfont-family:arial%2csans-serif%3bcolor:%23ccc%3b%7d%23mermaid-dark-0%20.cluster-label%20text%7bfill:%23F9FFFE%3b%7d%23mermaid-dark-0%20.cluster-label%20span%7bcolor:%23F9FFFE%3b%7d%23mermaid-dark-0%20.cluster-label%20span%20p%7bbackground-color:transparent%3b%7d%23mermaid-dark-0%20.label%20text%2c%23mermaid-dark-0%20span%7bfill:%23ccc%3bcolor:%23ccc%3b%7d%23mermaid-dark-0%20.node%20rect%2c%23mermaid-dark-0%20.node%20circle%2c%23mermaid-dark-0%20.node%20ellipse%2c%23mermaid-dark-0%20.node%20polygon%2c%23mermaid-dark-0%20.node%20path%7bfill:%231f2020%3bstroke:%23ccc%3bstroke-width:1px%3b%7d%23mermaid-dark-0%20.rough-node%20.label%20text%2c%23mermaid-dark-0%20.node%20.label%20text%2c%23mermaid-dark-0%20.image-shape%20.label%2c%23mermaid-dark-0%20.icon-shape%20.label%7btext-anchor:middle%3b%7d%23mermaid-dark-0%20.node%20.katex%20path%7bfill:black%3bstroke:black%3bstroke-width:1px%3b%7d%23mermaid-dark-0%20.rough-node%20.label%2c%23mermaid-dark-0%20.node%20.label%2c%23mermaid-dark-0%20.image-shape%20.label%2c%23mermaid-dark-0%20.icon-shape%20.label%7btext-align:center%3b%7d%23mermaid-dark-0%20.node.clickable%7bcursor:pointer%3b%7d%23mermaid-dark-0%20.root%20.anchor%20path%7bfill:lightgrey!important%3bstroke-width:0%3bstroke:lightgrey%3b%7d%23mermaid-dark-0%20.arrowheadPath%7bfill:lightgrey%3b%7d%23mermaid-dark-0%20.edgePath%20.path%7bstroke:lightgrey%3bstroke-width:1px%3b%7d%23mermaid-dark-0%20.flowchart-link%7bstroke:lightgrey%3bfill:none%3b%7d%23mermaid-dark-0%20.edgeLabel%7bbackground-color:hsl(0%2c%200%25%2c%2034.4117647059%25)%3btext-align:center%3b%7d%23mermaid-dark-0%20.edgeLabel%20p%7bbackground-color:hsl(0%2c%200%25%2c%2034.4117647059%25)%3b%7d%23mermaid-dark-0%20.edgeLabel%20rect%7bopacity:0.5%3bbackground-color:hsl(0%2c%200%25%2c%2034.4117647059%25)%3bfill:hsl(0%2c%200%25%2c%2034.4117647059%25)%3b%7d%23mermaid-dark-0%20.labelBkg%7bbackground-color:rgba(87.75%2c%2087.75%2c%2087.75%2c%200.5)%3b%7d%23mermaid-dark-0%20.cluster%20rect%7bfill:hsl(180%2c%201.5873015873%25%2c%2028.3529411765%25)%3bstroke:rgba(255%2c%20255%2c%20255%2c%200.25)%3bstroke-width:1px%3b%7d%23mermaid-dark-0%20.cluster%20text%7bfill:%23F9FFFE%3b%7d%23mermaid-dark-0%20.cluster%20span%7bcolor:%23F9FFFE%3b%7d%23mermaid-dark-0%20.node%20.collapsed-indicator%7bfill:rgba(255%2c%20255%2c%20255%2c%200.25)%3bstroke:none%3bopacity:0.6%3b%7d%23mermaid-dark-0%20.node%20.collapsed-separator%7bstroke:rgba(255%2c%20255%2c%20255%2c%200.25)%3bstroke-width:0.75px%3b%7d%23mermaid-dark-0%20div.mermaidTooltip%7bposition:absolute%3btext-align:center%3bmax-width:200px%3bpadding:2px%3bfont-family:arial%2csans-serif%3bfont-size:12px%3bbackground:hsl(20%2c%201.5873015873%25%2c%2012.3529411765%25)%3bborder:1px%20solid%20rgba(255%2c%20255%2c%20255%2c%200.25)%3bborder-radius:2px%3bpointer-events:none%3bz-index:100%3b%7d%23mermaid-dark-0%20.flowchartTitleText%7btext-anchor:middle%3bfont-size:18px%3bfill:%23ccc%3b%7d%23mermaid-dark-0%20rect.text%7bfill:none%3bstroke-width:0%3b%7d%23mermaid-dark-0%20.icon-shape%2c%23mermaid-dark-0%20.image-shape%7bbackground-color:hsl(0%2c%200%25%2c%2034.4117647059%25)%3btext-align:center%3b%7d%23mermaid-dark-0%20.icon-shape%20p%2c%23mermaid-dark-0%20.image-shape%20p%7bbackground-color:hsl(0%2c%200%25%2c%2034.4117647059%25)%3bpadding:2px%3b%7d%23mermaid-dark-0%20.icon-shape%20.label%20rect%2c%23mermaid-dark-0%20.image-shape%20.label%20rect%7bopacity:0.5%3bbackground-color:hsl(0%2c%200%25%2c%2034.4117647059%25)%3bfill:hsl(0%2c%200%25%2c%2034.4117647059%25)%3b%7d%23mermaid-dark-0%20.label-icon%7bdisplay:inline-block%3bheight:1em%3boverflow:visible%3bvertical-align:-0.125em%3b%7d%23mermaid-dark-0%20.node%20.label-icon%20path%7bfill:currentColor%3bstroke:revert%3bstroke-width:revert%3b%7d%23mermaid-dark-0%20.node%20.neo-node%7bstroke:%23ccc%3b%7d%23mermaid-dark-0%20%5bdata-look=&amp;#x27;neo&amp;#x27;%5d.node%20rect%2c%23mermaid-dark-0%20%5bdata-look=&amp;#x27;neo&amp;#x27;%5d.cluster%20rect%2c%23mermaid-dark-0%20%5bdata-look=&amp;#x27;neo&amp;#x27;%5d.node%20polygon%7bstroke:url(%23mermaid-dark-0-gradient)%3bfilter:drop-shadow(%201px%202px%202px%20rgba(185%2c185%2c185%2c1))%3b%7d%23mermaid-dark-0%20%5bdata-look=&amp;#x27;neo&amp;#x27;%5d.swimlane.cluster%20rect%7bfilter:none%3b%7d%23mermaid-dark-0%20%5bdata-look=&amp;#x27;neo&amp;#x27;%5d.node%20path%7bstroke:url(%23mermaid-dark-0-gradient)%3bstroke-width:1px%3b%7d%23mermaid-dark-0%20%5bdata-look=&amp;#x27;neo&amp;#x27;%5d.node%20.outer-path%7bfilter:drop-shadow(%201px%202px%202px%20rgba(185%2c185%2c185%2c1))%3b%7d%23mermaid-dark-0%20%5bdata-look=&amp;#x27;neo&amp;#x27;%5d.node%20.neo-line%20path%7bstroke:%23ccc%3bfilter:none%3b%7d%23mermaid-dark-0%20%5bdata-look=&amp;#x27;neo&amp;#x27;%5d.node%20circle%7bstroke:url(%23mermaid-dark-0-gradient)%3bfilter:drop-shadow(%201px%202px%202px%20rgba(185%2c185%2c185%2c1))%3b%7d%23mermaid-dark-0%20%5bdata-look=&amp;#x27;neo&amp;#x27;%5d.node%20circle%20.state-start%7bfill:black%3b%7d%23mermaid-dark-0%20%5bdata-look=&amp;#x27;neo&amp;#x27;%5d.icon-shape%20.icon%7bfill:url(%23mermaid-dark-0-gradient)%3bfilter:drop-shadow(%201px%202px%202px%20rgba(185%2c185%2c185%2c1))%3b%7d%23mermaid-dark-0%20%5bdata-look=&amp;#x27;neo&amp;#x27;%5d.icon-shape%20.icon-neo%20path%7bstroke:url(%23mermaid-dark-0-gradient)%3bfilter:drop-shadow(%201px%202px%202px%20rgba(185%2c185%2c185%2c1))%3b%7d%23mermaid-dark-0%20:root%7b--mermaid-font-family:arial%2csans-serif%3b%7d%3c/style%3e%3cg%3e%3cmarker%20id=&amp;#x27;mermaid-dark-0_flowchart-v2-pointEnd&amp;#x27;%20class=&amp;#x27;marker%20flowchart-v2&amp;#x27;%20viewBox=&amp;#x27;0%200%2010%2010&amp;#x27;%20refX=&amp;#x27;5&amp;#x27;%20refY=&amp;#x27;5&amp;#x27;%20markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27;%20markerWidth=&amp;#x27;8&amp;#x27;%20markerHeight=&amp;#x27;8&amp;#x27;%20orient=&amp;#x27;auto&amp;#x27;%3e%3cpath%20d=&amp;#x27;M%200%200%20L%2010%205%20L%200%2010%20z&amp;#x27;%20class=&amp;#x27;arrowMarkerPath&amp;#x27;%20style=&amp;#x27;stroke-width:%201%3b%20stroke-dasharray:%201%2c%200%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker%20id=&amp;#x27;mermaid-dark-0_flowchart-v2-pointStart&amp;#x27;%20class=&amp;#x27;marker%20flowchart-v2&amp;#x27;%20viewBox=&amp;#x27;0%200%2010%2010&amp;#x27;%20refX=&amp;#x27;4.5&amp;#x27;%20refY=&amp;#x27;5&amp;#x27;%20markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27;%20markerWidth=&amp;#x27;8&amp;#x27;%20markerHeight=&amp;#x27;8&amp;#x27;%20orient=&amp;#x27;auto&amp;#x27;%3e%3cpath%20d=&amp;#x27;M%200%205%20L%2010%2010%20L%2010%200%20z&amp;#x27;%20class=&amp;#x27;arrowMarkerPath&amp;#x27;%20style=&amp;#x27;stroke-width:%201%3b%20stroke-dasharray:%201%2c%200%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker%20id=&amp;#x27;mermaid-dark-0_flowchart-v2-pointEnd-margin&amp;#x27;%20class=&amp;#x27;marker%20flowchart-v2&amp;#x27;%20viewBox=&amp;#x27;0%200%2011.5%2014&amp;#x27;%20refX=&amp;#x27;11.5&amp;#x27;%20refY=&amp;#x27;7&amp;#x27;%20markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27;%20markerWidth=&amp;#x27;10.5&amp;#x27;%20markerHeight=&amp;#x27;14&amp;#x27;%20orient=&amp;#x27;auto&amp;#x27;%3e%3cpath%20d=&amp;#x27;M%200%200%20L%2011.5%207%20L%200%2014%20z&amp;#x27;%20class=&amp;#x27;arrowMarkerPath&amp;#x27;%20style=&amp;#x27;stroke-width:%200%3b%20stroke-dasharray:%201%2c%200%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker%20id=&amp;#x27;mermaid-dark-0_flowchart-v2-pointStart-margin&amp;#x27;%20class=&amp;#x27;marker%20flowchart-v2&amp;#x27;%20viewBox=&amp;#x27;0%200%2011.5%2014&amp;#x27;%20refX=&amp;#x27;1&amp;#x27;%20refY=&amp;#x27;7&amp;#x27;%20markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27;%20markerWidth=&amp;#x27;11.5&amp;#x27;%20markerHeight=&amp;#x27;14&amp;#x27;%20orient=&amp;#x27;auto&amp;#x27;%3e%3cpolygon%20points=&amp;#x27;0%2c7%2011.5%2c14%2011.5%2c0&amp;#x27;%20class=&amp;#x27;arrowMarkerPath&amp;#x27;%20style=&amp;#x27;stroke-width:%200%3b%20stroke-dasharray:%201%2c%200%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker%20id=&amp;#x27;mermaid-dark-0_flowchart-v2-circleEnd&amp;#x27;%20class=&amp;#x27;marker%20flowchart-v2&amp;#x27;%20viewBox=&amp;#x27;0%200%2010%2010&amp;#x27;%20refX=&amp;#x27;11&amp;#x27;%20refY=&amp;#x27;5&amp;#x27;%20markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27;%20markerWidth=&amp;#x27;11&amp;#x27;%20markerHeight=&amp;#x27;11&amp;#x27;%20orient=&amp;#x27;auto&amp;#x27;%3e%3ccircle%20cx=&amp;#x27;5&amp;#x27;%20cy=&amp;#x27;5&amp;#x27;%20r=&amp;#x27;5&amp;#x27;%20class=&amp;#x27;arrowMarkerPath&amp;#x27;%20style=&amp;#x27;stroke-width:%201%3b%20stroke-dasharray:%201%2c%200%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker%20id=&amp;#x27;mermaid-dark-0_flowchart-v2-circleStart&amp;#x27;%20class=&amp;#x27;marker%20flowchart-v2&amp;#x27;%20viewBox=&amp;#x27;0%200%2010%2010&amp;#x27;%20refX=&amp;#x27;-1&amp;#x27;%20refY=&amp;#x27;5&amp;#x27;%20markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27;%20markerWidth=&amp;#x27;11&amp;#x27;%20markerHeight=&amp;#x27;11&amp;#x27;%20orient=&amp;#x27;auto&amp;#x27;%3e%3ccircle%20cx=&amp;#x27;5&amp;#x27;%20cy=&amp;#x27;5&amp;#x27;%20r=&amp;#x27;5&amp;#x27;%20class=&amp;#x27;arrowMarkerPath&amp;#x27;%20style=&amp;#x27;stroke-width:%201%3b%20stroke-dasharray:%201%2c%200%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker%20id=&amp;#x27;mermaid-dark-0_flowchart-v2-circleEnd-margin&amp;#x27;%20class=&amp;#x27;marker%20flowchart-v2&amp;#x27;%20viewBox=&amp;#x27;0%200%2010%2010&amp;#x27;%20refY=&amp;#x27;5&amp;#x27;%20refX=&amp;#x27;12.25&amp;#x27;%20markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27;%20markerWidth=&amp;#x27;14&amp;#x27;%20markerHeight=&amp;#x27;14&amp;#x27;%20orient=&amp;#x27;auto&amp;#x27;%3e%3ccircle%20cx=&amp;#x27;5&amp;#x27;%20cy=&amp;#x27;5&amp;#x27;%20r=&amp;#x27;5&amp;#x27;%20class=&amp;#x27;arrowMarkerPath&amp;#x27;%20style=&amp;#x27;stroke-width:%200%3b%20stroke-dasharray:%201%2c%200%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker%20id=&amp;#x27;mermaid-dark-0_flowchart-v2-circleStart-margin&amp;#x27;%20class=&amp;#x27;marker%20flowchart-v2&amp;#x27;%20viewBox=&amp;#x27;0%200%2010%2010&amp;#x27;%20refX=&amp;#x27;-2&amp;#x27;%20refY=&amp;#x27;5&amp;#x27;%20markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27;%20markerWidth=&amp;#x27;14&amp;#x27;%20markerHeight=&amp;#x27;14&amp;#x27;%20orient=&amp;#x27;auto&amp;#x27;%3e%3ccircle%20cx=&amp;#x27;5&amp;#x27;%20cy=&amp;#x27;5&amp;#x27;%20r=&amp;#x27;5&amp;#x27;%20class=&amp;#x27;arrowMarkerPath&amp;#x27;%20style=&amp;#x27;stroke-width:%200%3b%20stroke-dasharray:%201%2c%200%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker%20id=&amp;#x27;mermaid-dark-0_flowchart-v2-crossEnd&amp;#x27;%20class=&amp;#x27;marker%20cross%20flowchart-v2&amp;#x27;%20viewBox=&amp;#x27;0%200%2011%2011&amp;#x27;%20refX=&amp;#x27;12&amp;#x27;%20refY=&amp;#x27;5.2&amp;#x27;%20markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27;%20markerWidth=&amp;#x27;11&amp;#x27;%20markerHeight=&amp;#x27;11&amp;#x27;%20orient=&amp;#x27;auto&amp;#x27;%3e%3cpath%20d=&amp;#x27;M%201%2c1%20l%209%2c9%20M%2010%2c1%20l%20-9%2c9&amp;#x27;%20class=&amp;#x27;arrowMarkerPath&amp;#x27;%20style=&amp;#x27;stroke-width:%202%3b%20stroke-dasharray:%201%2c%200%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker%20id=&amp;#x27;mermaid-dark-0_flowchart-v2-crossStart&amp;#x27;%20class=&amp;#x27;marker%20cross%20flowchart-v2&amp;#x27;%20viewBox=&amp;#x27;0%200%2011%2011&amp;#x27;%20refX=&amp;#x27;-1&amp;#x27;%20refY=&amp;#x27;5.2&amp;#x27;%20markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27;%20markerWidth=&amp;#x27;11&amp;#x27;%20markerHeight=&amp;#x27;11&amp;#x27;%20orient=&amp;#x27;auto&amp;#x27;%3e%3cpath%20d=&amp;#x27;M%201%2c1%20l%209%2c9%20M%2010%2c1%20l%20-9%2c9&amp;#x27;%20class=&amp;#x27;arrowMarkerPath&amp;#x27;%20style=&amp;#x27;stroke-width:%202%3b%20stroke-dasharray:%201%2c%200%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker%20id=&amp;#x27;mermaid-dark-0_flowchart-v2-crossEnd-margin&amp;#x27;%20class=&amp;#x27;marker%20cross%20flowchart-v2&amp;#x27;%20viewBox=&amp;#x27;0%200%2015%2015&amp;#x27;%20refX=&amp;#x27;17.7&amp;#x27;%20refY=&amp;#x27;7.5&amp;#x27;%20markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27;%20markerWidth=&amp;#x27;12&amp;#x27;%20markerHeight=&amp;#x27;12&amp;#x27;%20orient=&amp;#x27;auto&amp;#x27;%3e%3cpath%20d=&amp;#x27;M%201%2c1%20L%2014%2c14%20M%201%2c14%20L%2014%2c1&amp;#x27;%20class=&amp;#x27;arrowMarkerPath&amp;#x27;%20style=&amp;#x27;stroke-width:%202.5%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker%20id=&amp;#x27;mermaid-dark-0_flowchart-v2-crossStart-margin&amp;#x27;%20class=&amp;#x27;marker%20cross%20flowchart-v2&amp;#x27;%20viewBox=&amp;#x27;0%200%2015%2015&amp;#x27;%20refX=&amp;#x27;-3.5&amp;#x27;%20refY=&amp;#x27;7.5&amp;#x27;%20markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27;%20markerWidth=&amp;#x27;12&amp;#x27;%20markerHeight=&amp;#x27;12&amp;#x27;%20orient=&amp;#x27;auto&amp;#x27;%3e%3cpath%20d=&amp;#x27;M%201%2c1%20L%2014%2c14%20M%201%2c14%20L%2014%2c1&amp;#x27;%20class=&amp;#x27;arrowMarkerPath&amp;#x27;%20style=&amp;#x27;stroke-width:%202.5%3b%20stroke-dasharray:%201%2c%200%3b&amp;#x27;/%3e%3c/marker%3e%3cg%20class=&amp;#x27;root&amp;#x27;%3e%3cg%20class=&amp;#x27;clusters&amp;#x27;/%3e%3cg%20class=&amp;#x27;edgePaths&amp;#x27;%3e%3cpath%20d=&amp;#x27;M217.406%2c35L221.573%2c35C225.74%2c35%2c234.073%2c35%2c241.74%2c35C249.406%2c35%2c256.406%2c35%2c259.906%2c35L263.406%2c35&amp;#x27;%20id=&amp;#x27;mermaid-dark-0-L_A_B_0&amp;#x27;%20class=&amp;#x27;edge-thickness-normal%20edge-pattern-solid%20edge-thickness-normal%20edge-pattern-solid%20flowchart-link&amp;#x27;%20style=&amp;#x27;%3b&amp;#x27;%20data-edge=&amp;#x27;true&amp;#x27;%20data-et=&amp;#x27;edge&amp;#x27;%20data-id=&amp;#x27;L_A_B_0&amp;#x27;%20data-points=&amp;#x27;W3sieCI6MjE3LjQwNjI1LCJ5IjozNX0seyJ4IjoyNDIuNDA2MjUsInkiOjM1fSx7IngiOjI2Ny40MDYyNSwieSI6MzV9XQ==&amp;#x27;%20data-look=&amp;#x27;classic&amp;#x27;%20marker-end=&amp;#x27;url(%23mermaid-dark-0_flowchart-v2-pointEnd)&amp;#x27;/%3e%3cpath%20d=&amp;#x27;M446.547%2c35L450.714%2c35C454.88%2c35%2c463.214%2c35%2c470.88%2c35C478.547%2c35%2c485.547%2c35%2c489.047%2c35L492.547%2c35&amp;#x27;%20id=&amp;#x27;mermaid-dark-0-L_B_C_0&amp;#x27;%20class=&amp;#x27;edge-thickness-normal%20edge-pattern-solid%20edge-thickness-normal%20edge-pattern-solid%20flowchart-link&amp;#x27;%20style=&amp;#x27;%3b&amp;#x27;%20data-edge=&amp;#x27;true&amp;#x27;%20data-et=&amp;#x27;edge&amp;#x27;%20data-id=&amp;#x27;L_B_C_0&amp;#x27;%20data-points=&amp;#x27;W3sieCI6NDQ2LjU0Njg3NSwieSI6MzV9LHsieCI6NDcxLjU0Njg3NSwieSI6MzV9LHsieCI6NDk2LjU0Njg3NSwieSI6MzV9XQ==&amp;#x27;%20data-look=&amp;#x27;classic&amp;#x27;%20marker-end=&amp;#x27;url(%23mermaid-dark-0_flowchart-v2-pointEnd)&amp;#x27;/%3e%3c/g%3e%3cg%20class=&amp;#x27;edgeLabels&amp;#x27;%3e%3cg%20class=&amp;#x27;edgeLabel&amp;#x27;%3e%3cg%20class=&amp;#x27;label&amp;#x27;%20data-id=&amp;#x27;L_A_B_0&amp;#x27;%20transform=&amp;#x27;translate(0%2c%200)&amp;#x27;%3e%3cforeignObject%20width=&amp;#x27;0&amp;#x27;%20height=&amp;#x27;0&amp;#x27;%3e%3cdiv%20xmlns=&amp;#x27;http://www.w3.org/1999/xhtml&amp;#x27;%20class=&amp;#x27;labelBkg&amp;#x27;%20style=&amp;#x27;display:%20table-cell%3b%20white-space:%20nowrap%3b%20line-height:%201.5%3b%20max-width:%20200px%3b%20text-align:%20center%3b&amp;#x27;%3e%3cspan%20class=&amp;#x27;edgeLabel&amp;#x27;%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg%20class=&amp;#x27;edgeLabel&amp;#x27;%3e%3cg%20class=&amp;#x27;label&amp;#x27;%20data-id=&amp;#x27;L_B_C_0&amp;#x27;%20transform=&amp;#x27;translate(0%2c%200)&amp;#x27;%3e%3cforeignObject%20width=&amp;#x27;0&amp;#x27;%20height=&amp;#x27;0&amp;#x27;%3e%3cdiv%20xmlns=&amp;#x27;http://www.w3.org/1999/xhtml&amp;#x27;%20class=&amp;#x27;labelBkg&amp;#x27;%20style=&amp;#x27;display:%20table-cell%3b%20white-space:%20nowrap%3b%20line-height:%201.5%3b%20max-width:%20200px%3b%20text-align:%20center%3b&amp;#x27;%3e%3cspan%20class=&amp;#x27;edgeLabel&amp;#x27;%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg%20class=&amp;#x27;nodes&amp;#x27;%3e%3cg%20class=&amp;#x27;node%20default&amp;#x27;%20id=&amp;#x27;mermaid-dark-0-flowchart-A-0&amp;#x27;%20data-look=&amp;#x27;classic&amp;#x27;%20transform=&amp;#x27;translate(112.703125%2c%2035)&amp;#x27;%3e%3crect%20class=&amp;#x27;basic%20label-container&amp;#x27;%20style=&amp;#x27;&amp;#x27;%20x=&amp;#x27;-104.703125&amp;#x27;%20y=&amp;#x27;-27&amp;#x27;%20width=&amp;#x27;209.40625&amp;#x27;%20height=&amp;#x27;54&amp;#x27;/%3e%3cg%20class=&amp;#x27;label&amp;#x27;%20style=&amp;#x27;&amp;#x27;%20transform=&amp;#x27;translate(-74.703125%2c%20-12)&amp;#x27;%3e%3crect/%3e%3cforeignObject%20width=&amp;#x27;149.40625&amp;#x27;%20height=&amp;#x27;24&amp;#x27;%3e%3cdiv%20xmlns=&amp;#x27;http://www.w3.org/1999/xhtml&amp;#x27;%20style=&amp;#x27;display:%20table-cell%3b%20white-space:%20nowrap%3b%20line-height:%201.5%3b%20max-width:%20200px%3b%20text-align:%20center%3b&amp;#x27;%3e%3cspan%20class=&amp;#x27;nodeLabel&amp;#x27;%3e%3cp%3eFinish%20the%20current%20job%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg%20class=&amp;#x27;node%20default&amp;#x27;%20id=&amp;#x27;mermaid-dark-0-flowchart-B-1&amp;#x27;%20data-look=&amp;#x27;classic&amp;#x27;%20transform=&amp;#x27;translate(356.9765625%2c%2035)&amp;#x27;%3e%3crect%20class=&amp;#x27;basic%20label-container&amp;#x27;%20style=&amp;#x27;&amp;#x27;%20x=&amp;#x27;-89.5703125&amp;#x27;%20y=&amp;#x27;-27&amp;#x27;%20width=&amp;#x27;179.140625&amp;#x27;%20height=&amp;#x27;54&amp;#x27;/%3e%3cg%20class=&amp;#x27;label&amp;#x27;%20style=&amp;#x27;&amp;#x27;%20transform=&amp;#x27;translate(-59.5703125%2c%20-12)&amp;#x27;%3e%3crect/%3e%3cforeignObject%20width=&amp;#x27;119.140625&amp;#x27;%20height=&amp;#x27;24&amp;#x27;%3e%3cdiv%20xmlns=&amp;#x27;http://www.w3.org/1999/xhtml&amp;#x27;%20style=&amp;#x27;display:%20table-cell%3b%20white-space:%20nowrap%3b%20line-height:%201.5%3b%20max-width:%20200px%3b%20text-align:%20center%3b&amp;#x27;%3e%3cspan%20class=&amp;#x27;nodeLabel&amp;#x27;%3e%3cp%3eDrain%20microtasks%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg%20class=&amp;#x27;node%20default&amp;#x27;%20id=&amp;#x27;mermaid-dark-0-flowchart-C-3&amp;#x27;%20data-look=&amp;#x27;classic&amp;#x27;%20transform=&amp;#x27;translate(596.3671875%2c%2035)&amp;#x27;%3e%3crect%20class=&amp;#x27;basic%20label-container&amp;#x27;%20style=&amp;#x27;&amp;#x27;%20x=&amp;#x27;-99.8203125&amp;#x27;%20y=&amp;#x27;-27&amp;#x27;%20width=&amp;#x27;199.640625&amp;#x27;%20height=&amp;#x27;54&amp;#x27;/%3e%3cg%20class=&amp;#x27;label&amp;#x27;%20style=&amp;#x27;&amp;#x27;%20transform=&amp;#x27;translate(-69.8203125%2c%20-12)&amp;#x27;%3e%3crect/%3e%3cforeignObject%20width=&amp;#x27;139.640625&amp;#x27;%20height=&amp;#x27;24&amp;#x27;%3e%3cdiv%20xmlns=&amp;#x27;http://www.w3.org/1999/xhtml&amp;#x27;%20style=&amp;#x27;display:%20table-cell%3b%20white-space:%20nowrap%3b%20line-height:%201.5%3b%20max-width:%20200px%3b%20text-align:%20center%3b&amp;#x27;%3e%3cspan%20class=&amp;#x27;nodeLabel&amp;#x27;%3e%3cp%3eSelect%20the%20next%20task%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cfilter%20id=&amp;#x27;mermaid-dark-0-drop-shadow&amp;#x27;%20height=&amp;#x27;130%25&amp;#x27;%20width=&amp;#x27;130%25&amp;#x27;%3e%3cfeDropShadow%20dx=&amp;#x27;4&amp;#x27;%20dy=&amp;#x27;4&amp;#x27;%20stdDeviation=&amp;#x27;0&amp;#x27;%20flood-opacity=&amp;#x27;0.06&amp;#x27;%20flood-color=&amp;#x27;white&amp;#x27;/%3e%3c/filter%3e%3c/defs%3e%3cdefs%3e%3cfilter%20id=&amp;#x27;mermaid-dark-0-drop-shadow-small&amp;#x27;%20height=&amp;#x27;150%25&amp;#x27;%20width=&amp;#x27;150%25&amp;#x27;%3e%3cfeDropShadow%20dx=&amp;#x27;2&amp;#x27;%20dy=&amp;#x27;2&amp;#x27;%20stdDeviation=&amp;#x27;0&amp;#x27;%20flood-opacity=&amp;#x27;0.06&amp;#x27;%20flood-color=&amp;#x27;white&amp;#x27;/%3e%3c/filter%3e%3c/defs%3e%3clinearGradient%20id=&amp;#x27;mermaid-dark-0-gradient&amp;#x27;%20gradientUnits=&amp;#x27;objectBoundingBox&amp;#x27;%20x1=&amp;#x27;0%25&amp;#x27;%20y1=&amp;#x27;0%25&amp;#x27;%20x2=&amp;#x27;100%25&amp;#x27;%20y2=&amp;#x27;0%25&amp;#x27;%3e%3cstop%20offset=&amp;#x27;0%25&amp;#x27;%20stop-color=&amp;#x27;%23cccccc&amp;#x27;%20stop-opacity=&amp;#x27;1&amp;#x27;/%3e%3cstop%20offset=&amp;#x27;100%25&amp;#x27;%20stop-color=&amp;#x27;hsl(180%2c%200%25%2c%2018.3529411765%25)&amp;#x27;%20stop-opacity=&amp;#x27;1&amp;#x27;/%3e%3c/linearGradient%3e%3c/svg%3e&quot; width=&quot;704.1875&quot;&gt;&lt;img alt=&quot;The current JavaScript job finishes, then microtasks drain, and then the host selects the next task.&quot; height=&quot;70&quot; id=&quot;mermaid-0&quot; src=&quot;data:image/svg+xml,%3csvg id=&amp;#x27;mermaid-0&amp;#x27; width=&amp;#x27;100%25&amp;#x27; xmlns=&amp;#x27;http://www.w3.org/2000/svg&amp;#x27; xmlns:xlink=&amp;#x27;http://www.w3.org/1999/xlink&amp;#x27; class=&amp;#x27;flowchart&amp;#x27; style=&amp;#x27;max-width: 704.1875px%3b&amp;#x27; viewBox=&amp;#x27;0 0 704.1875 70&amp;#x27; role=&amp;#x27;graphics-document document&amp;#x27; aria-roledescription=&amp;#x27;flowchart-v2&amp;#x27; aria-describedby=&amp;#x27;chart-desc-mermaid-0&amp;#x27; aria-labelledby=&amp;#x27;chart-title-mermaid-0&amp;#x27;%3e%3ctitle id=&amp;#x27;chart-title-mermaid-0&amp;#x27;%3eEvent loop turn order%3c/title%3e%3cdesc id=&amp;#x27;chart-desc-mermaid-0&amp;#x27;%3eThe current JavaScript job finishes%2c then microtasks drain%2c and then the host selects the next task.%3c/desc%3e%3cstyle%3e%23mermaid-0%7bfont-family:arial%2csans-serif%3bfont-size:16px%3bfill:%23333%3b%7d%40keyframes edge-animation-frame%7bfrom%7bstroke-dashoffset:0%3b%7d%7d%40keyframes dash%7bto%7bstroke-dashoffset:0%3b%7d%7d%23mermaid-0 .edge-animation-slow%7bstroke-dasharray:9%2c5!important%3bstroke-dashoffset:900%3banimation:dash 50s linear infinite%3bstroke-linecap:round%3b%7d%23mermaid-0 .edge-animation-fast%7bstroke-dasharray:9%2c5!important%3bstroke-dashoffset:900%3banimation:dash 20s linear infinite%3bstroke-linecap:round%3b%7d%23mermaid-0 .error-icon%7bfill:%23552222%3b%7d%23mermaid-0 .error-text%7bfill:%23552222%3bstroke:%23552222%3b%7d%23mermaid-0 .edge-thickness-normal%7bstroke-width:1px%3b%7d%23mermaid-0 .edge-thickness-thick%7bstroke-width:3.5px%3b%7d%23mermaid-0 .edge-pattern-solid%7bstroke-dasharray:0%3b%7d%23mermaid-0 .edge-thickness-invisible%7bstroke-width:0%3bfill:none%3b%7d%23mermaid-0 .edge-pattern-dashed%7bstroke-dasharray:3%3b%7d%23mermaid-0 .edge-pattern-dotted%7bstroke-dasharray:2%3b%7d%23mermaid-0 .marker%7bfill:%23333333%3bstroke:%23333333%3b%7d%23mermaid-0 .marker.cross%7bstroke:%23333333%3b%7d%23mermaid-0 svg%7bfont-family:arial%2csans-serif%3bfont-size:16px%3b%7d%23mermaid-0 p%7bmargin:0%3b%7d%23mermaid-0 .label%7bfont-family:arial%2csans-serif%3bcolor:%23333%3b%7d%23mermaid-0 .cluster-label text%7bfill:%23333%3b%7d%23mermaid-0 .cluster-label span%7bcolor:%23333%3b%7d%23mermaid-0 .cluster-label span p%7bbackground-color:transparent%3b%7d%23mermaid-0 .label text%2c%23mermaid-0 span%7bfill:%23333%3bcolor:%23333%3b%7d%23mermaid-0 .node rect%2c%23mermaid-0 .node circle%2c%23mermaid-0 .node ellipse%2c%23mermaid-0 .node polygon%2c%23mermaid-0 .node path%7bfill:%23ECECFF%3bstroke:%239370DB%3bstroke-width:1px%3b%7d%23mermaid-0 .rough-node .label text%2c%23mermaid-0 .node .label text%2c%23mermaid-0 .image-shape .label%2c%23mermaid-0 .icon-shape .label%7btext-anchor:middle%3b%7d%23mermaid-0 .node .katex path%7bfill:black%3bstroke:black%3bstroke-width:1px%3b%7d%23mermaid-0 .rough-node .label%2c%23mermaid-0 .node .label%2c%23mermaid-0 .image-shape .label%2c%23mermaid-0 .icon-shape .label%7btext-align:center%3b%7d%23mermaid-0 .node.clickable%7bcursor:pointer%3b%7d%23mermaid-0 .root .anchor path%7bfill:%23333333!important%3bstroke-width:0%3bstroke:%23333333%3b%7d%23mermaid-0 .arrowheadPath%7bfill:%23333333%3b%7d%23mermaid-0 .edgePath .path%7bstroke:%23333333%3bstroke-width:1px%3b%7d%23mermaid-0 .flowchart-link%7bstroke:%23333333%3bfill:none%3b%7d%23mermaid-0 .edgeLabel%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3btext-align:center%3b%7d%23mermaid-0 .edgeLabel p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .edgeLabel rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .labelBkg%7bbackground-color:rgba(232%2c 232%2c 232%2c 0.5)%3b%7d%23mermaid-0 .cluster rect%7bfill:%23ffffde%3bstroke:%23aaaa33%3bstroke-width:1px%3b%7d%23mermaid-0 .cluster text%7bfill:%23333%3b%7d%23mermaid-0 .cluster span%7bcolor:%23333%3b%7d%23mermaid-0 .node .collapsed-indicator%7bfill:%23aaaa33%3bstroke:none%3bopacity:0.6%3b%7d%23mermaid-0 .node .collapsed-separator%7bstroke:%23aaaa33%3bstroke-width:0.75px%3b%7d%23mermaid-0 div.mermaidTooltip%7bposition:absolute%3btext-align:center%3bmax-width:200px%3bpadding:2px%3bfont-family:arial%2csans-serif%3bfont-size:12px%3bbackground:hsl(80%2c 100%25%2c 96.2745098039%25)%3bborder:1px solid %23aaaa33%3bborder-radius:2px%3bpointer-events:none%3bz-index:100%3b%7d%23mermaid-0 .flowchartTitleText%7btext-anchor:middle%3bfont-size:18px%3bfill:%23333%3b%7d%23mermaid-0 rect.text%7bfill:none%3bstroke-width:0%3b%7d%23mermaid-0 .icon-shape%2c%23mermaid-0 .image-shape%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3btext-align:center%3b%7d%23mermaid-0 .icon-shape p%2c%23mermaid-0 .image-shape p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bpadding:2px%3b%7d%23mermaid-0 .icon-shape .label rect%2c%23mermaid-0 .image-shape .label rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .label-icon%7bdisplay:inline-block%3bheight:1em%3boverflow:visible%3bvertical-align:-0.125em%3b%7d%23mermaid-0 .node .label-icon path%7bfill:currentColor%3bstroke:revert%3bstroke-width:revert%3b%7d%23mermaid-0 .node .neo-node%7bstroke:%239370DB%3b%7d%23mermaid-0 %5bdata-look=&amp;#x27;neo&amp;#x27;%5d.node rect%2c%23mermaid-0 %5bdata-look=&amp;#x27;neo&amp;#x27;%5d.cluster rect%2c%23mermaid-0 %5bdata-look=&amp;#x27;neo&amp;#x27;%5d.node polygon%7bstroke:%239370DB%3bfilter:drop-shadow(1px 2px 2px rgba(185%2c 185%2c 185%2c 1))%3b%7d%23mermaid-0 %5bdata-look=&amp;#x27;neo&amp;#x27;%5d.swimlane.cluster rect%7bfilter:none%3b%7d%23mermaid-0 %5bdata-look=&amp;#x27;neo&amp;#x27;%5d.node path%7bstroke:%239370DB%3bstroke-width:1px%3b%7d%23mermaid-0 %5bdata-look=&amp;#x27;neo&amp;#x27;%5d.node .outer-path%7bfilter:drop-shadow(1px 2px 2px rgba(185%2c 185%2c 185%2c 1))%3b%7d%23mermaid-0 %5bdata-look=&amp;#x27;neo&amp;#x27;%5d.node .neo-line path%7bstroke:%239370DB%3bfilter:none%3b%7d%23mermaid-0 %5bdata-look=&amp;#x27;neo&amp;#x27;%5d.node circle%7bstroke:%239370DB%3bfilter:drop-shadow(1px 2px 2px rgba(185%2c 185%2c 185%2c 1))%3b%7d%23mermaid-0 %5bdata-look=&amp;#x27;neo&amp;#x27;%5d.node circle .state-start%7bfill:black%3b%7d%23mermaid-0 %5bdata-look=&amp;#x27;neo&amp;#x27;%5d.icon-shape .icon%7bfill:%239370DB%3bfilter:drop-shadow(1px 2px 2px rgba(185%2c 185%2c 185%2c 1))%3b%7d%23mermaid-0 %5bdata-look=&amp;#x27;neo&amp;#x27;%5d.icon-shape .icon-neo path%7bstroke:%239370DB%3bfilter:drop-shadow(1px 2px 2px rgba(185%2c 185%2c 185%2c 1))%3b%7d%23mermaid-0 :root%7b--mermaid-font-family:arial%2csans-serif%3b%7d%3c/style%3e%3cg%3e%3cmarker id=&amp;#x27;mermaid-0_flowchart-v2-pointEnd&amp;#x27; class=&amp;#x27;marker flowchart-v2&amp;#x27; viewBox=&amp;#x27;0 0 10 10&amp;#x27; refX=&amp;#x27;5&amp;#x27; refY=&amp;#x27;5&amp;#x27; markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27; markerWidth=&amp;#x27;8&amp;#x27; markerHeight=&amp;#x27;8&amp;#x27; orient=&amp;#x27;auto&amp;#x27;%3e%3cpath d=&amp;#x27;M 0 0 L 10 5 L 0 10 z&amp;#x27; class=&amp;#x27;arrowMarkerPath&amp;#x27; style=&amp;#x27;stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker id=&amp;#x27;mermaid-0_flowchart-v2-pointStart&amp;#x27; class=&amp;#x27;marker flowchart-v2&amp;#x27; viewBox=&amp;#x27;0 0 10 10&amp;#x27; refX=&amp;#x27;4.5&amp;#x27; refY=&amp;#x27;5&amp;#x27; markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27; markerWidth=&amp;#x27;8&amp;#x27; markerHeight=&amp;#x27;8&amp;#x27; orient=&amp;#x27;auto&amp;#x27;%3e%3cpath d=&amp;#x27;M 0 5 L 10 10 L 10 0 z&amp;#x27; class=&amp;#x27;arrowMarkerPath&amp;#x27; style=&amp;#x27;stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker id=&amp;#x27;mermaid-0_flowchart-v2-pointEnd-margin&amp;#x27; class=&amp;#x27;marker flowchart-v2&amp;#x27; viewBox=&amp;#x27;0 0 11.5 14&amp;#x27; refX=&amp;#x27;11.5&amp;#x27; refY=&amp;#x27;7&amp;#x27; markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27; markerWidth=&amp;#x27;10.5&amp;#x27; markerHeight=&amp;#x27;14&amp;#x27; orient=&amp;#x27;auto&amp;#x27;%3e%3cpath d=&amp;#x27;M 0 0 L 11.5 7 L 0 14 z&amp;#x27; class=&amp;#x27;arrowMarkerPath&amp;#x27; style=&amp;#x27;stroke-width: 0%3b stroke-dasharray: 1%2c 0%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker id=&amp;#x27;mermaid-0_flowchart-v2-pointStart-margin&amp;#x27; class=&amp;#x27;marker flowchart-v2&amp;#x27; viewBox=&amp;#x27;0 0 11.5 14&amp;#x27; refX=&amp;#x27;1&amp;#x27; refY=&amp;#x27;7&amp;#x27; markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27; markerWidth=&amp;#x27;11.5&amp;#x27; markerHeight=&amp;#x27;14&amp;#x27; orient=&amp;#x27;auto&amp;#x27;%3e%3cpolygon points=&amp;#x27;0%2c7 11.5%2c14 11.5%2c0&amp;#x27; class=&amp;#x27;arrowMarkerPath&amp;#x27; style=&amp;#x27;stroke-width: 0%3b stroke-dasharray: 1%2c 0%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker id=&amp;#x27;mermaid-0_flowchart-v2-circleEnd&amp;#x27; class=&amp;#x27;marker flowchart-v2&amp;#x27; viewBox=&amp;#x27;0 0 10 10&amp;#x27; refX=&amp;#x27;11&amp;#x27; refY=&amp;#x27;5&amp;#x27; markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27; markerWidth=&amp;#x27;11&amp;#x27; markerHeight=&amp;#x27;11&amp;#x27; orient=&amp;#x27;auto&amp;#x27;%3e%3ccircle cx=&amp;#x27;5&amp;#x27; cy=&amp;#x27;5&amp;#x27; r=&amp;#x27;5&amp;#x27; class=&amp;#x27;arrowMarkerPath&amp;#x27; style=&amp;#x27;stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker id=&amp;#x27;mermaid-0_flowchart-v2-circleStart&amp;#x27; class=&amp;#x27;marker flowchart-v2&amp;#x27; viewBox=&amp;#x27;0 0 10 10&amp;#x27; refX=&amp;#x27;-1&amp;#x27; refY=&amp;#x27;5&amp;#x27; markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27; markerWidth=&amp;#x27;11&amp;#x27; markerHeight=&amp;#x27;11&amp;#x27; orient=&amp;#x27;auto&amp;#x27;%3e%3ccircle cx=&amp;#x27;5&amp;#x27; cy=&amp;#x27;5&amp;#x27; r=&amp;#x27;5&amp;#x27; class=&amp;#x27;arrowMarkerPath&amp;#x27; style=&amp;#x27;stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker id=&amp;#x27;mermaid-0_flowchart-v2-circleEnd-margin&amp;#x27; class=&amp;#x27;marker flowchart-v2&amp;#x27; viewBox=&amp;#x27;0 0 10 10&amp;#x27; refY=&amp;#x27;5&amp;#x27; refX=&amp;#x27;12.25&amp;#x27; markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27; markerWidth=&amp;#x27;14&amp;#x27; markerHeight=&amp;#x27;14&amp;#x27; orient=&amp;#x27;auto&amp;#x27;%3e%3ccircle cx=&amp;#x27;5&amp;#x27; cy=&amp;#x27;5&amp;#x27; r=&amp;#x27;5&amp;#x27; class=&amp;#x27;arrowMarkerPath&amp;#x27; style=&amp;#x27;stroke-width: 0%3b stroke-dasharray: 1%2c 0%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker id=&amp;#x27;mermaid-0_flowchart-v2-circleStart-margin&amp;#x27; class=&amp;#x27;marker flowchart-v2&amp;#x27; viewBox=&amp;#x27;0 0 10 10&amp;#x27; refX=&amp;#x27;-2&amp;#x27; refY=&amp;#x27;5&amp;#x27; markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27; markerWidth=&amp;#x27;14&amp;#x27; markerHeight=&amp;#x27;14&amp;#x27; orient=&amp;#x27;auto&amp;#x27;%3e%3ccircle cx=&amp;#x27;5&amp;#x27; cy=&amp;#x27;5&amp;#x27; r=&amp;#x27;5&amp;#x27; class=&amp;#x27;arrowMarkerPath&amp;#x27; style=&amp;#x27;stroke-width: 0%3b stroke-dasharray: 1%2c 0%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker id=&amp;#x27;mermaid-0_flowchart-v2-crossEnd&amp;#x27; class=&amp;#x27;marker cross flowchart-v2&amp;#x27; viewBox=&amp;#x27;0 0 11 11&amp;#x27; refX=&amp;#x27;12&amp;#x27; refY=&amp;#x27;5.2&amp;#x27; markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27; markerWidth=&amp;#x27;11&amp;#x27; markerHeight=&amp;#x27;11&amp;#x27; orient=&amp;#x27;auto&amp;#x27;%3e%3cpath d=&amp;#x27;M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9&amp;#x27; class=&amp;#x27;arrowMarkerPath&amp;#x27; style=&amp;#x27;stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker id=&amp;#x27;mermaid-0_flowchart-v2-crossStart&amp;#x27; class=&amp;#x27;marker cross flowchart-v2&amp;#x27; viewBox=&amp;#x27;0 0 11 11&amp;#x27; refX=&amp;#x27;-1&amp;#x27; refY=&amp;#x27;5.2&amp;#x27; markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27; markerWidth=&amp;#x27;11&amp;#x27; markerHeight=&amp;#x27;11&amp;#x27; orient=&amp;#x27;auto&amp;#x27;%3e%3cpath d=&amp;#x27;M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9&amp;#x27; class=&amp;#x27;arrowMarkerPath&amp;#x27; style=&amp;#x27;stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker id=&amp;#x27;mermaid-0_flowchart-v2-crossEnd-margin&amp;#x27; class=&amp;#x27;marker cross flowchart-v2&amp;#x27; viewBox=&amp;#x27;0 0 15 15&amp;#x27; refX=&amp;#x27;17.7&amp;#x27; refY=&amp;#x27;7.5&amp;#x27; markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27; markerWidth=&amp;#x27;12&amp;#x27; markerHeight=&amp;#x27;12&amp;#x27; orient=&amp;#x27;auto&amp;#x27;%3e%3cpath d=&amp;#x27;M 1%2c1 L 14%2c14 M 1%2c14 L 14%2c1&amp;#x27; class=&amp;#x27;arrowMarkerPath&amp;#x27; style=&amp;#x27;stroke-width: 2.5%3b&amp;#x27;/%3e%3c/marker%3e%3cmarker id=&amp;#x27;mermaid-0_flowchart-v2-crossStart-margin&amp;#x27; class=&amp;#x27;marker cross flowchart-v2&amp;#x27; viewBox=&amp;#x27;0 0 15 15&amp;#x27; refX=&amp;#x27;-3.5&amp;#x27; refY=&amp;#x27;7.5&amp;#x27; markerUnits=&amp;#x27;userSpaceOnUse&amp;#x27; markerWidth=&amp;#x27;12&amp;#x27; markerHeight=&amp;#x27;12&amp;#x27; orient=&amp;#x27;auto&amp;#x27;%3e%3cpath d=&amp;#x27;M 1%2c1 L 14%2c14 M 1%2c14 L 14%2c1&amp;#x27; class=&amp;#x27;arrowMarkerPath&amp;#x27; style=&amp;#x27;stroke-width: 2.5%3b stroke-dasharray: 1%2c 0%3b&amp;#x27;/%3e%3c/marker%3e%3cg class=&amp;#x27;root&amp;#x27;%3e%3cg class=&amp;#x27;clusters&amp;#x27;/%3e%3cg class=&amp;#x27;edgePaths&amp;#x27;%3e%3cpath d=&amp;#x27;M217.406%2c35L221.573%2c35C225.74%2c35%2c234.073%2c35%2c241.74%2c35C249.406%2c35%2c256.406%2c35%2c259.906%2c35L263.406%2c35&amp;#x27; id=&amp;#x27;mermaid-0-L_A_B_0&amp;#x27; class=&amp;#x27;edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link&amp;#x27; style=&amp;#x27;%3b&amp;#x27; data-edge=&amp;#x27;true&amp;#x27; data-et=&amp;#x27;edge&amp;#x27; data-id=&amp;#x27;L_A_B_0&amp;#x27; data-points=&amp;#x27;W3sieCI6MjE3LjQwNjI1LCJ5IjozNX0seyJ4IjoyNDIuNDA2MjUsInkiOjM1fSx7IngiOjI2Ny40MDYyNSwieSI6MzV9XQ==&amp;#x27; data-look=&amp;#x27;classic&amp;#x27; marker-end=&amp;#x27;url(%23mermaid-0_flowchart-v2-pointEnd)&amp;#x27;/%3e%3cpath d=&amp;#x27;M446.547%2c35L450.714%2c35C454.88%2c35%2c463.214%2c35%2c470.88%2c35C478.547%2c35%2c485.547%2c35%2c489.047%2c35L492.547%2c35&amp;#x27; id=&amp;#x27;mermaid-0-L_B_C_0&amp;#x27; class=&amp;#x27;edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link&amp;#x27; style=&amp;#x27;%3b&amp;#x27; data-edge=&amp;#x27;true&amp;#x27; data-et=&amp;#x27;edge&amp;#x27; data-id=&amp;#x27;L_B_C_0&amp;#x27; data-points=&amp;#x27;W3sieCI6NDQ2LjU0Njg3NSwieSI6MzV9LHsieCI6NDcxLjU0Njg3NSwieSI6MzV9LHsieCI6NDk2LjU0Njg3NSwieSI6MzV9XQ==&amp;#x27; data-look=&amp;#x27;classic&amp;#x27; marker-end=&amp;#x27;url(%23mermaid-0_flowchart-v2-pointEnd)&amp;#x27;/%3e%3c/g%3e%3cg class=&amp;#x27;edgeLabels&amp;#x27;%3e%3cg class=&amp;#x27;edgeLabel&amp;#x27;%3e%3cg class=&amp;#x27;label&amp;#x27; data-id=&amp;#x27;L_A_B_0&amp;#x27; transform=&amp;#x27;translate(0%2c 0)&amp;#x27;%3e%3cforeignObject width=&amp;#x27;0&amp;#x27; height=&amp;#x27;0&amp;#x27;%3e%3cdiv xmlns=&amp;#x27;http://www.w3.org/1999/xhtml&amp;#x27; class=&amp;#x27;labelBkg&amp;#x27; style=&amp;#x27;display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b&amp;#x27;%3e%3cspan class=&amp;#x27;edgeLabel&amp;#x27;%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class=&amp;#x27;edgeLabel&amp;#x27;%3e%3cg class=&amp;#x27;label&amp;#x27; data-id=&amp;#x27;L_B_C_0&amp;#x27; transform=&amp;#x27;translate(0%2c 0)&amp;#x27;%3e%3cforeignObject width=&amp;#x27;0&amp;#x27; height=&amp;#x27;0&amp;#x27;%3e%3cdiv xmlns=&amp;#x27;http://www.w3.org/1999/xhtml&amp;#x27; class=&amp;#x27;labelBkg&amp;#x27; style=&amp;#x27;display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b&amp;#x27;%3e%3cspan class=&amp;#x27;edgeLabel&amp;#x27;%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg class=&amp;#x27;nodes&amp;#x27;%3e%3cg class=&amp;#x27;node default&amp;#x27; id=&amp;#x27;mermaid-0-flowchart-A-0&amp;#x27; data-look=&amp;#x27;classic&amp;#x27; transform=&amp;#x27;translate(112.703125%2c 35)&amp;#x27;%3e%3crect class=&amp;#x27;basic label-container&amp;#x27; style=&amp;#x27;&amp;#x27; x=&amp;#x27;-104.703125&amp;#x27; y=&amp;#x27;-27&amp;#x27; width=&amp;#x27;209.40625&amp;#x27; height=&amp;#x27;54&amp;#x27;/%3e%3cg class=&amp;#x27;label&amp;#x27; style=&amp;#x27;&amp;#x27; transform=&amp;#x27;translate(-74.703125%2c -12)&amp;#x27;%3e%3crect/%3e%3cforeignObject width=&amp;#x27;149.40625&amp;#x27; height=&amp;#x27;24&amp;#x27;%3e%3cdiv xmlns=&amp;#x27;http://www.w3.org/1999/xhtml&amp;#x27; style=&amp;#x27;display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b&amp;#x27;%3e%3cspan class=&amp;#x27;nodeLabel&amp;#x27;%3e%3cp%3eFinish the current job%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class=&amp;#x27;node default&amp;#x27; id=&amp;#x27;mermaid-0-flowchart-B-1&amp;#x27; data-look=&amp;#x27;classic&amp;#x27; transform=&amp;#x27;translate(356.9765625%2c 35)&amp;#x27;%3e%3crect class=&amp;#x27;basic label-container&amp;#x27; style=&amp;#x27;&amp;#x27; x=&amp;#x27;-89.5703125&amp;#x27; y=&amp;#x27;-27&amp;#x27; width=&amp;#x27;179.140625&amp;#x27; height=&amp;#x27;54&amp;#x27;/%3e%3cg class=&amp;#x27;label&amp;#x27; style=&amp;#x27;&amp;#x27; transform=&amp;#x27;translate(-59.5703125%2c -12)&amp;#x27;%3e%3crect/%3e%3cforeignObject width=&amp;#x27;119.140625&amp;#x27; height=&amp;#x27;24&amp;#x27;%3e%3cdiv xmlns=&amp;#x27;http://www.w3.org/1999/xhtml&amp;#x27; style=&amp;#x27;display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b&amp;#x27;%3e%3cspan class=&amp;#x27;nodeLabel&amp;#x27;%3e%3cp%3eDrain microtasks%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class=&amp;#x27;node default&amp;#x27; id=&amp;#x27;mermaid-0-flowchart-C-3&amp;#x27; data-look=&amp;#x27;classic&amp;#x27; transform=&amp;#x27;translate(596.3671875%2c 35)&amp;#x27;%3e%3crect class=&amp;#x27;basic label-container&amp;#x27; style=&amp;#x27;&amp;#x27; x=&amp;#x27;-99.8203125&amp;#x27; y=&amp;#x27;-27&amp;#x27; width=&amp;#x27;199.640625&amp;#x27; height=&amp;#x27;54&amp;#x27;/%3e%3cg class=&amp;#x27;label&amp;#x27; style=&amp;#x27;&amp;#x27; transform=&amp;#x27;translate(-69.8203125%2c -12)&amp;#x27;%3e%3crect/%3e%3cforeignObject width=&amp;#x27;139.640625&amp;#x27; height=&amp;#x27;24&amp;#x27;%3e%3cdiv xmlns=&amp;#x27;http://www.w3.org/1999/xhtml&amp;#x27; style=&amp;#x27;display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b&amp;#x27;%3e%3cspan class=&amp;#x27;nodeLabel&amp;#x27;%3e%3cp%3eSelect the next task%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cfilter id=&amp;#x27;mermaid-0-drop-shadow&amp;#x27; height=&amp;#x27;130%25&amp;#x27; width=&amp;#x27;130%25&amp;#x27;%3e%3cfeDropShadow dx=&amp;#x27;4&amp;#x27; dy=&amp;#x27;4&amp;#x27; stdDeviation=&amp;#x27;0&amp;#x27; flood-opacity=&amp;#x27;0.06&amp;#x27; flood-color=&amp;#x27;black&amp;#x27;/%3e%3c/filter%3e%3c/defs%3e%3cdefs%3e%3cfilter id=&amp;#x27;mermaid-0-drop-shadow-small&amp;#x27; height=&amp;#x27;150%25&amp;#x27; width=&amp;#x27;150%25&amp;#x27;%3e%3cfeDropShadow dx=&amp;#x27;2&amp;#x27; dy=&amp;#x27;2&amp;#x27; stdDeviation=&amp;#x27;0&amp;#x27; flood-opacity=&amp;#x27;0.06&amp;#x27; flood-color=&amp;#x27;black&amp;#x27;/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e&quot; title=&quot;Event loop turn order&quot; width=&quot;704.1875&quot;&gt;&lt;/picture&gt;
&lt;h2 id=&quot;a-tiny-experiment&quot;&gt;A tiny experiment&lt;/h2&gt;
&lt;div class=&quot;expressive-code&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;/_astro/ec.v43l5.css&quot;&gt;&lt;script type=&quot;module&quot; src=&quot;/_astro/ec.0vx5m.js&quot;&gt;&lt;/script&gt;&lt;figure class=&quot;frame has-title&quot;&gt;&lt;figcaption class=&quot;header&quot;&gt;&lt;span class=&quot;title&quot;&gt;order.js&lt;/span&gt;&lt;/figcaption&gt;&lt;pre data-language=&quot;js&quot;&gt;&lt;code&gt;&lt;div class=&quot;ec-line&quot;&gt;&lt;div class=&quot;code&quot;&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;console.&lt;/span&gt;&lt;span style=&quot;--0:#6F42C1;--1:#B392F0&quot;&gt;log&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--0:#032F62;--1:#9ECBFF&quot;&gt;&apos;first&apos;&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ec-line highlight mark&quot;&gt;&lt;div class=&quot;code&quot;&gt;&lt;span style=&quot;--0:#613aa9;--1:#c2a8f3&quot;&gt;queueMicrotask&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;(() &lt;/span&gt;&lt;span style=&quot;--0:#982934;--1:#fb99a3&quot;&gt;=&gt;&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt; console.&lt;/span&gt;&lt;span style=&quot;--0:#613aa9;--1:#c2a8f3&quot;&gt;log&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--0:#032F62;--1:#9ECBFF&quot;&gt;&apos;microtask&apos;&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;));&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ec-line&quot;&gt;&lt;div class=&quot;code&quot;&gt;&lt;span style=&quot;--0:#6F42C1;--1:#B392F0&quot;&gt;setTimeout&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;(() &lt;/span&gt;&lt;span style=&quot;--0:#BF3441;--1:#F97583&quot;&gt;=&gt;&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt; console.&lt;/span&gt;&lt;span style=&quot;--0:#6F42C1;--1:#B392F0&quot;&gt;log&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--0:#032F62;--1:#9ECBFF&quot;&gt;&apos;task&apos;&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;), &lt;/span&gt;&lt;span style=&quot;--0:#005CC5;--1:#79B8FF&quot;&gt;0&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ec-line&quot;&gt;&lt;div class=&quot;code&quot;&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;console.&lt;/span&gt;&lt;span style=&quot;--0:#6F42C1;--1:#B392F0&quot;&gt;log&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--0:#032F62;--1:#9ECBFF&quot;&gt;&apos;last&apos;&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div class=&quot;copy&quot;&gt;&lt;div aria-live=&quot;polite&quot;&gt;&lt;/div&gt;&lt;button title=&quot;Copy to clipboard&quot; data-copied=&quot;Copied!&quot; data-code=&quot;console.log(&amp;#x27;first&amp;#x27;);queueMicrotask(() =&gt; console.log(&amp;#x27;microtask&amp;#x27;));setTimeout(() =&gt; console.log(&amp;#x27;task&amp;#x27;), 0);console.log(&amp;#x27;last&amp;#x27;);&quot;&gt;&lt;div&gt;&lt;/div&gt;&lt;/button&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;The current script finishes first. Microtasks drain next. Only then can the timer task start a new turn.&lt;/p&gt;
&lt;h2 id=&quot;the-rule-i-keep-nearby&quot;&gt;The rule I keep nearby&lt;/h2&gt;
&lt;p&gt;That gives us a compact rule worth remembering:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Finish the current job.&lt;/li&gt;
&lt;li&gt;Drain the microtask queue.&lt;/li&gt;
&lt;li&gt;Let the host choose the next task.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;The rule is smaller than most diagrams, but it explains more of the behavior I encounter in real code.&lt;/p&gt;</content:encoded><language>en</language><category>javascript</category><category>fundamentals</category></item><item><title>Tôi chỉ thật sự hiểu event loop khi ngừng xem nó là một vòng lặp</title><link>https://intuitively.pages.dev/vi/articles/hieu-dung-ve-event-loop/</link><guid isPermaLink="true">https://intuitively.pages.dev/vi/articles/hieu-dung-ve-event-loop/</guid><description>Một mô hình tư duy thực tế về task, microtask và thứ tự thực thi của JavaScript bất đồng bộ.</description><pubDate>Tue, 18 Aug 2026 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;Event loop thường được minh hoạ bằng một vòng tròn liên tục kiểm tra hàng đợi. Hình ảnh đó hữu ích, nhưng lại che mất ý quan trọng nhất: &lt;strong&gt;JavaScript hoàn thành trọn vẹn một công việc, còn môi trường chạy quyết định khi nào công việc tiếp theo được bắt đầu.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Khi chuyển từ suy nghĩ về một “vòng lặp” sang các &lt;em&gt;lượt thực thi&lt;/em&gt;, thứ tự chạy trở nên dễ dự đoán hơn nhiều.&lt;/p&gt;
&lt;div class=&quot;expressive-code&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;/_astro/ec.v43l5.css&quot;&gt;&lt;script type=&quot;module&quot; src=&quot;/_astro/ec.0vx5m.js&quot;&gt;&lt;/script&gt;&lt;figure class=&quot;frame has-title&quot;&gt;&lt;figcaption class=&quot;header&quot;&gt;&lt;span class=&quot;title&quot;&gt;thu-tu.js&lt;/span&gt;&lt;/figcaption&gt;&lt;pre data-language=&quot;js&quot;&gt;&lt;code&gt;&lt;div class=&quot;ec-line&quot;&gt;&lt;div class=&quot;code&quot;&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;console.&lt;/span&gt;&lt;span style=&quot;--0:#6F42C1;--1:#B392F0&quot;&gt;log&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--0:#032F62;--1:#9ECBFF&quot;&gt;&apos;đầu tiên&apos;&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ec-line highlight mark&quot;&gt;&lt;div class=&quot;code&quot;&gt;&lt;span style=&quot;--0:#613aa9;--1:#c2a8f3&quot;&gt;queueMicrotask&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;(() &lt;/span&gt;&lt;span style=&quot;--0:#982934;--1:#fb99a3&quot;&gt;=&gt;&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt; console.&lt;/span&gt;&lt;span style=&quot;--0:#613aa9;--1:#c2a8f3&quot;&gt;log&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--0:#032F62;--1:#9ECBFF&quot;&gt;&apos;microtask&apos;&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;));&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ec-line&quot;&gt;&lt;div class=&quot;code&quot;&gt;&lt;span style=&quot;--0:#6F42C1;--1:#B392F0&quot;&gt;setTimeout&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;(() &lt;/span&gt;&lt;span style=&quot;--0:#BF3441;--1:#F97583&quot;&gt;=&gt;&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt; console.&lt;/span&gt;&lt;span style=&quot;--0:#6F42C1;--1:#B392F0&quot;&gt;log&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--0:#032F62;--1:#9ECBFF&quot;&gt;&apos;task&apos;&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;), &lt;/span&gt;&lt;span style=&quot;--0:#005CC5;--1:#79B8FF&quot;&gt;0&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ec-line&quot;&gt;&lt;div class=&quot;code&quot;&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;console.&lt;/span&gt;&lt;span style=&quot;--0:#6F42C1;--1:#B392F0&quot;&gt;log&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--0:#032F62;--1:#9ECBFF&quot;&gt;&apos;cuối cùng&apos;&lt;/span&gt;&lt;span style=&quot;--0:#24292E;--1:#E1E4E8&quot;&gt;);&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div class=&quot;copy&quot;&gt;&lt;div aria-live=&quot;polite&quot;&gt;&lt;/div&gt;&lt;button title=&quot;Copy to clipboard&quot; data-copied=&quot;Copied!&quot; data-code=&quot;console.log(&amp;#x27;đầu tiên&amp;#x27;);queueMicrotask(() =&gt; console.log(&amp;#x27;microtask&amp;#x27;));setTimeout(() =&gt; console.log(&amp;#x27;task&amp;#x27;), 0);console.log(&amp;#x27;cuối cùng&amp;#x27;);&quot;&gt;&lt;div&gt;&lt;/div&gt;&lt;/button&gt;&lt;/div&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;Script hiện tại phải kết thúc trước. Sau đó toàn bộ microtask được xử lý. Chỉ khi ấy timer task mới có thể bắt đầu một lượt mới.&lt;/p&gt;
&lt;p&gt;Ta có thể ghi nhớ bằng ba bước:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Hoàn thành công việc hiện tại.&lt;/li&gt;
&lt;li&gt;Xử lý hết hàng đợi microtask.&lt;/li&gt;
&lt;li&gt;Để môi trường chạy chọn task tiếp theo.&lt;/li&gt;
&lt;/ol&gt;</content:encoded><language>vi</language><category>javascript</category><category>fundamentals</category></item><item><title>Debugging got faster when I started keeping an evidence ledger</title><link>https://intuitively.pages.dev/en/articles/debugging-with-evidence/</link><guid isPermaLink="true">https://intuitively.pages.dev/en/articles/debugging-with-evidence/</guid><description>A lightweight debugging practice that separates observations, guesses, and experiments before they blur together.</description><pubDate>Sun, 09 Aug 2026 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;The most expensive part of debugging is often not finding evidence. It is forgetting which conclusion came from which observation.&lt;/p&gt;
&lt;p&gt;I now keep a tiny ledger with three columns:&lt;/p&gt;




















&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Observation&lt;/th&gt;&lt;th&gt;Hypothesis&lt;/th&gt;&lt;th&gt;Next experiment&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;The retry happens after 30 seconds&lt;/td&gt;&lt;td&gt;A client timeout is firing&lt;/td&gt;&lt;td&gt;Log timestamps at both boundaries&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;The server finishes in 12 seconds&lt;/td&gt;&lt;td&gt;The response is delayed elsewhere&lt;/td&gt;&lt;td&gt;Compare proxy and browser timing&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;p&gt;The format prevents a plausible story from quietly turning into a fact. Each experiment must either strengthen a hypothesis, weaken it, or reveal a better question.&lt;/p&gt;
&lt;p&gt;This is slower for the first five minutes and dramatically faster for the next hour.&lt;/p&gt;</content:encoded><language>en</language><category>debugging</category><category>practice</category></item><item><title>Viết lại điều vừa học là một phép kiểm thử, không phải bản tóm tắt</title><link>https://intuitively.pages.dev/vi/articles/viet-de-hieu-sau-hon/</link><guid isPermaLink="true">https://intuitively.pages.dev/vi/articles/viet-de-hieu-sau-hon/</guid><description>Cách dùng việc viết để phát hiện những khoảng trống mà cảm giác ‘đã hiểu’ thường che giấu.</description><pubDate>Mon, 27 Jul 2026 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;Đọc xong một tài liệu thường tạo ra cảm giác quen thuộc. Cảm giác đó rất dễ bị nhầm với sự hiểu biết.&lt;/p&gt;
&lt;p&gt;Viết lại ý tưởng bằng ngôn ngữ của mình tạo ra một phép kiểm thử khắt khe hơn. Nếu không thể giải thích điều kiện, giới hạn và một ví dụ phản chứng, tôi có lẽ mới chỉ nhận ra các từ khoá chứ chưa hiểu cơ chế.&lt;/p&gt;
&lt;p&gt;Tôi dùng ba câu hỏi:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Cơ chế này giải quyết vấn đề gì?&lt;/li&gt;
&lt;li&gt;Điều gì phải đúng để nó hoạt động?&lt;/li&gt;
&lt;li&gt;Khi nào mô hình này không còn hữu ích?&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Một ghi chú tốt không chứng minh rằng tôi biết mọi thứ. Nó chỉ chỉ ra chính xác phần nào tôi chưa biết.&lt;/p&gt;</content:encoded><language>vi</language><category>fundamentals</category><category>practice</category></item></channel></rss>