Yielding and Scheduling

function step(i: number) {
  for (let n = 0; n < 100 && i < rows.length; n++, i++) appendRow(rows[i]);
  if (i < rows.length) setTimeout(() => step(i), 0);
}
step(0);

// see renderRows above:
//   yield when the elapsed budget is spent, not every N items
//   yield through the best available primitive
//   check the abort signal at the re-entry point

A hundred rows is a different amount of time on every device, so the fixed-count loop is either still a long task on a slow phone or a needlessly slow one on a fast laptop. And because the timer is nested, it is clamped: the job takes far longer than it needs to on every device. The budgeted version adapts to the machine it is actually running on, and can stop when the user has moved on.

1// One place to decide how we hand the thread back.
2const channel = typeof MessageChannel !== "undefined" ? new MessageChannel() : null;
3 
4function yieldToBrowser(): Promise<void> {
5  // Preferred where available: keeps our place in the queue ahead of
6  // newly-posted background work. Not universal - feature-detect.
7  const s = (globalThis as any).scheduler;
8  if (s && typeof s.yield === "function") return s.yield();
9 
10  // Portable and unclamped, unlike a nested zero-delay timer.
11  if (channel) {
12    return new Promise((resolve) => {
13      channel.port1.onmessage = () => resolve();
14      channel.port2.postMessage(null);
15    });
16  }
17 
18  // Last resort. Real, and clamped once nested.
19  return new Promise((resolve) => setTimeout(resolve, 0));
20}
21 
22async function renderRows(rows: Row[], signal: AbortSignal) {
23  let deadline = performance.now() + BUDGET_PER_CHUNK;
24  for (let i = 0; i < rows.length; i++) {
25    appendRow(rows[i]);
26    if (performance.now() >= deadline) {
27      await yieldToBrowser();
28      // Re-entry point: the world may have moved.
29      if (signal.aborted) return;
30      deadline = performance.now() + BUDGET_PER_CHUNK;
31    }
32  }
33}

The abort check sits immediately after the yield, not at the top of the loop. That is the only place where something else can have happened — and where the job must be willing to stop.