<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Intuitively — English</title><description>Careful notes on the systems I build, the bugs I follow, and the ideas that become clearer when I write them down.</description><link>https://intuitively.pages.dev/</link><language>en</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><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><category>debugging</category><category>practice</category></item></channel></rss>