scheduler.yield() — stop freezing the main thread

<div class="pg">
    <h1 class="pg-title">🎮 Give the browser a break</h1>
    <p class="pg-sub">
      The same CPU work, run three ways. The blue dot is driven by
      <code>requestAnimationFrame</code>, so it only moves when the browser gets a
      turn — <strong>if it stops, your thread is blocked</strong>. Run each mode and
      watch the dot, then try clicking the button mid-run.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Pick a mode and run</div>
      <div class="btn-row">
        <button class="btn bad"     id="runBlock">Block the thread</button>
        <button class="btn"         id="runTimeout">Yield with setTimeout(0)</button>
        <button class="btn primary" id="runYield">Yield with scheduler.yield()</button>
      </div>

<div class="wrap-controls" style="margin-top:16px">
        <div class="field">
          <label class="label" for="load">Workload <span class="mono" id="loadOut">600 ms</span></label>
          <input type="range" id="load" min="200" max="2000" step="100" value="600" />
        </div>
        <div class="field">
          <label class="label" for="budget">Yield every <span class="mono" id="budgetOut">50 ms</span></label>
          <input type="range" id="budget" min="4" max="200" step="2" value="50" />
        </div>
      </div>
      <p class="hint">
        Workload is calibrated to real CPU time on <em>your</em> machine, so 600&nbsp;ms means
        roughly 600&nbsp;ms of actual arithmetic. The yield budget only affects the two
        yielding modes — it is the <code>&gt; 50</code> in
        <code>if (performance.now() - lastYield &gt; 50)</code>.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Is the browser still alive?</div>
      <div class="track">
        <div class="runner" id="runner"></div>
        <span class="track-label" id="fps">idle</span>
      </div>

<div class="clicker" style="margin-top:14px">
        <button class="btn sm" id="clickMe">Click me during the run</button>
        <span class="count" id="clickCount">0 clicks · worst delay —</span>
      </div>

<div class="metrics">
        <div class="metric">
          <span class="k">frames painted</span>
          <span class="v" id="mFrames">—</span>
        </div>
        <div class="metric">
          <span class="k">longest freeze</span>
          <span class="v" id="mFreeze">—</span>
        </div>
        <div class="metric">
          <span class="k">total time</span>
          <span class="v" id="mTotal">—</span>
        </div>
      </div>

<div class="status" id="status" style="margin-top:14px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — pick a mode above.</span>
      </div>
      <p class="hint" id="hint">
        “Longest freeze” is the biggest gap between two animation frames. Anything over
        ~50&nbsp;ms is what Chrome DevTools flags as a long task; over ~200&nbsp;ms and users
        assume your app is broken.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Compare your runs</div>
      <table class="results">
        <thead>
          <tr><th>mode</th><th>frames</th><th>longest freeze</th><th>clicks heard</th><th>total</th></tr>
        </thead>
        <tbody id="tbody"></tbody>
      </table>
      <p class="hint">
        Run all three with the same workload. Blocking is the one that should look obviously
        broken: a single frame and one enormous freeze. Both yielding modes keep the worst
        freeze near your budget instead. Between those two, expect
        <code>scheduler.yield()</code> to <em>finish sooner</em> — browsers clamp nested
        <code>setTimeout</code> to roughly 4&nbsp;ms per hop, and across hundreds of hops that
        adds up, while a yield continuation resumes in a boosted task queue.
        <code>setTimeout(0)</code> may well paint more frames along the way; it is buying them
        with wall-clock time you did not choose to spend.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> The loop that is running</div>
      <div class="code" id="code" aria-live="polite"></div>
      <p class="hint" id="codeHint">The highlighted line is the only difference between the modes.</p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.