images/asyncdefer.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 820 200">
  <style><![CDATA[
    .dividers {
      stroke: rgb(106, 148, 0);
      stroke-dasharray: 1, 1;
    }

    .tag {
      dominant-baseline: central;
      font-family: monospace;
      font-weight: bold;
      font-size: 13px;
    }

    .label {
      dominant-baseline: central;
      font-family: sans-serif;
      font-size: 10px;
    }

    .parser {
      stroke: rgb(110, 174, 0);
      fill: rgb(110, 174, 0);
    }

    .fetch {
      stroke: rgb(0, 53, 255);
      fill: rgb(0, 53, 255);
    }

    .execution {
      stroke: rgb(255, 0, 0);
      fill: rgb(255, 0, 0);
    }

    .progress {
      stroke-width: 2;
    }

    .progress.parser:not(.first) {
      marker-start: url(#parser-marker);
    }
    .progress.parser:not(.last) {
      marker-end: url(#parser-marker);
    }

    .progress.fetch:not(.first) {
      marker-start: url(#fetch-marker);
    }
    .progress.fetch:not(.last) {
      marker-end: url(#fetch-marker);
    }

    .progress.execution:not(.first) {
      marker-start: url(#execution-marker);
    }
    .progress.execution:not(.last) {
      marker-end: url(#execution-marker);
    }

    marker > circle {
      stroke-width: 0;
    }

    .connector {
      stroke: rgb(206, 206, 206);
      stroke-width: 1;
    }
  ]]></style>

  <g class="dividers">
    <line x1="0" x2="820" y1="33.5" y2="33.5"/>
    <line x1="0" x2="820" y1="66.5" y2="66.5"/>
    <line x1="0" x2="820" y1="99.5" y2="99.5"/>
    <line x1="0" x2="820" y1="132.5" y2="132.5"/>

    <line x1="245.5" x2="245.5" y1="1" y2="29"/>
    <line x1="245.5" x2="245.5" y1="38" y2="62"/>
    <line x1="245.5" x2="245.5" y1="68" y2="95"/>
    <line x1="245.5" x2="245.5" y1="104" y2="128"/>
    <line x1="245.5" x2="245.5" y1="137" y2="165"/>
  </g>

  <defs>
    <marker id="parser-marker" markerWidth="3" markerHeight="3" refX="1.5" refY="1.5">
      <circle cx="1.5" cy="1.5" r="1.5" class="parser"/>
    </marker>
    <marker id="fetch-marker" markerWidth="3" markerHeight="3" refX="1.5" refY="1.5">
      <circle cx="1.5" cy="1.5" r="1.5" class="fetch"/>
    </marker>
    <marker id="execution-marker" markerWidth="3" markerHeight="3" refX="1.5" refY="1.5">
      <circle cx="1.5" cy="1.5" r="1.5" class="execution"/>
    </marker>
  </defs>

  <g>
    <text x="12" y="16.75" class="tag">&lt;script&gt;</text>

    <g transform="translate(252,0)">
      <text x="0" y="9" class="label">Scripting:</text>
      <text x="0" y="24" class="label">HTML Parser:</text>
      <line x1="257" x2="257" y1="9" y2="24" class="connector"/>
      <line x1="404" x2="404" y1="9" y2="24" class="connector"/>
      <line x1="106" x2="257" y1="24" y2="24" class="parser progress first"/>
      <line x1="257" x2="354" y1="9" y2="9" class="fetch progress"/>
      <line x1="354" x2="404" y1="9" y2="9" class="execution progress"/>
      <line x1="404" x2="532" y1="24" y2="24" class="parser progress last"/>
    </g>
  </g>

  <g transform="translate(0,33)">
    <text x="12" y="16.75" class="tag">&lt;script defer&gt;</text>

    <g transform="translate(252,0)">
      <text x="0" y="9" class="label">Scripting:</text>
      <text x="0" y="24" class="label">HTML Parser:</text>
      <line x1="484" x2="484" y1="9" y2="24" class="connector"/>
      <line x1="106" x2="484" y1="24" y2="24" class="parser progress first"/>
      <line x1="257" x2="354" y1="9" y2="9" class="fetch progress"/>
      <line x1="484" x2="532" y1="9" y2="9" class="execution progress last"/>
    </g>
  </g>

  <g transform="translate(0,66)">
    <text x="12" y="16.75" class="tag">&lt;script async&gt;</text>

    <g transform="translate(252,0)">
      <text x="0" y="9" class="label">Scripting:</text>
      <text x="0" y="24" class="label">HTML Parser:</text>
      <line x1="354" x2="354" y1="9" y2="24" class="connector"/>
      <line x1="404" x2="404" y1="9" y2="24" class="connector"/>
      <line x1="106" x2="354" y1="24" y2="24" class="parser progress first"/>
      <line x1="257" x2="354" y1="9" y2="9" class="fetch progress"/>
      <line x1="354" x2="404" y1="9" y2="9" class="execution progress"/>
      <line x1="404" x2="532" y1="24" y2="24" class="parser progress last"/>
    </g>
  </g>

  <g transform="translate(0,99)">
    <text x="12" y="16.75" class="tag">&lt;script type="module"&gt;</text>

    <g transform="translate(252,0)">
      <text x="0" y="9" class="label">Scripting:</text>
      <text x="0" y="24" class="label">HTML Parser:</text>
      <line x1="484" x2="484" y1="9" y2="24" class="connector"/>
      <line x1="106" x2="484" y1="24" y2="24" class="parser progress first"/>
      <line x1="257" x2="354" y1="9" y2="9" class="fetch progress"/>
      <line x1="354" x2="374" y1="9" y2="9" class="fetch progress"/>
      <line x1="354" x2="374" y1="9" y2="16.5" class="fetch progress"/>
      <line x1="374" x2="394" y1="16.5" y2="16.5" class="fetch progress"/>
      <line x1="394" x2="414" y1="16.5" y2="16.5" class="fetch progress"/>
      <line x1="394" x2="414" y1="16.5" y2="9" class="fetch progress"/>
      <line x1="484" x2="532" y1="9" y2="9" class="execution progress last"/>
    </g>
  </g>

  <g transform="translate(0,132)">
    <text x="12" y="16.75" class="tag">&lt;script type="module" async&gt;</text>

    <g transform="translate(252,0)">
      <text x="0" y="9" class="label">Scripting:</text>
      <text x="0" y="24" class="label">HTML Parser:</text>
      <line x1="414" x2="414" y1="9" y2="24" class="connector"/>
      <line x1="464" x2="464" y1="9" y2="24" class="connector"/>
      <line x1="106" x2="414" y1="24" y2="24" class="parser progress first"/>
      <line x1="257" x2="354" y1="9" y2="9" class="fetch progress"/>
      <line x1="354" x2="374" y1="9" y2="9" class="fetch progress"/>
      <line x1="354" x2="374" y1="9" y2="16.5" class="fetch progress"/>
      <line x1="374" x2="394" y1="16.5" y2="16.5" class="fetch progress"/>
      <line x1="394" x2="414" y1="16.5" y2="16.5" class="fetch progress"/>
      <line x1="394" x2="414" y1="16.5" y2="9" class="fetch progress"/>
      <line x1="414" x2="464" y1="9" y2="9" class="execution progress"/>
      <line x1="464" x2="532" y1="24" y2="24" class="parser progress last"/>
    </g>
  </g>

  <g class="legend" transform="translate(357.5,172)">
    <circle cx="3" cy="3" r="3" class="parser"/>
    <text x="9" y="3" class="label">parser</text>

    <circle cx="50" cy="3" r="3" class="fetch"/>
    <text x="56" y="3" class="label">fetch</text>

    <circle cx="90" cy="3" r="3" class="execution"/>
    <text x="96" y="3" class="label">execution</text>
  </g>

  <text x="782" y="175" text-anchor="end" class="label">runtime →</text>
</svg>