See why Promise.all is faster. Watch it happen.

Configure async tasks, pick a pattern (sequential, Promise.all, or Promise.allSettled), and watch an animated Gantt chart show exactly when each task runs. Add failures to see how each pattern responds.

1. 1

   Configure tasks

   Set duration and whether each task fails

2. 2

   Pick a pattern

   Sequential, Promise.all, allSettled, for...of

3. 3

   Watch it run

   Animated bars show real elapsed time

Zeeshan Tofiq

Full Stack Developer

Add to Favorites

Share

How the Async Timing Visualizer works

Every bar you see comes from a real Promise settling in your browser. Nothing is pre-rendered, and no timings are hard-coded into the chart.

1. 1

   You describe the async work

   Add up to six tasks. Each one has a duration slider (200ms to 3000ms) and a fail toggle. A task stands in for one unit of I/O: an HTTP request, a database query, a file read, a queue publish.

2. 2

   You pick an execution pattern

   Sequential await, Promise.all, Promise.allSettled, or for...of with await. The description under each option tells you how that pattern behaves when one of the tasks rejects.

3. 3

   Each task becomes a real Promise

   On Run, every task is wrapped in a Promise around setTimeout(duration). Tasks with the fail toggle on call reject(); the rest call resolve(). The chosen pattern then drives them exactly as your own code would.

4. 4

   Bars are drawn from wall-clock timestamps

   Date.now() is recorded when a promise is created and again when it settles. The bar starts at the first offset and stops growing at the second, so the chart is a recording of what happened, not a prediction.

5. 5

   The summary reports total elapsed time

   When the run finishes, a banner shows the total wall-clock duration and the outcome: completed, completed with failures, or failed. With Compare with sequential enabled, it also prints the speedup factor between the two runs.

6. 6

   The equivalent JavaScript is generated for you

   The panel at the bottom of the tool prints working code for your exact task list and pattern, with the expected total in a comment. Change a duration or a pattern and the snippet updates with it.

What the timeline output means

The chart encodes four things at once: when a task started, how long it ran, whether it settled successfully, and how the whole run compares to doing the same work one call at a time.

Task A  |████████▌            |  1000ms
Task B  |████▌                |  1500ms   ← still running
Task C  |██████████████       |   800ms

Sequential:  Task A ends 1000ms, Task B ends 2500ms, Task C ends 3300ms
Promise.all: Task A ends 1000ms, Task B ends 1500ms, Task C ends  800ms

Task B ✕   rejected at 1500ms
Promise.all      -> run marked failed
Promise.allSettled -> run marked "completed with failures"

Staircase (sequential)      Block (Promise.all)
|███                    |   |███                    |
|   ████                |   |█████                  |
|       ██              |   |██                     |
total 3300ms                total 1500ms

Tasks: 1000ms + 1500ms + 800ms
Sequential total  3300ms
Parallel total    1500ms   (the slowest task)
Speedup           2.2x

When to use each pattern

const user = await fetchUser();
const orders = await fetchOrders(user.id);

const [user, posts] = await Promise.all([
  fetchUser(), fetchPosts()
]);

const results = await Promise.allSettled([
  fetchUser(), fetchPosts()
]);

for (const id of orderIds) {
  await processOrder(id);
}

Async syntax reference

The exact syntax behind each timeline shape, plus the edge cases the visualizer cannot draw for you: result shapes, error handling, and the loop that silently does nothing.

// Total = 1000ms + 1500ms
const user = await fetchUser(id);          // ~1000ms
const orders = await fetchOrders(user.id); // ~1500ms, needs user.id

// Total = the slowest call, not the sum
const [user, posts, settings] = await Promise.all([
  fetchUser(id),
  fetchPosts(id),
  fetchSettings(id),
]);

// One failure aborts the destructuring, so handle it
try {
  const [user, posts] = await Promise.all([fetchUser(id), fetchPosts(id)]);
} catch (err) {
  // err is the first rejection reason
}

const results = await Promise.allSettled([fetchUser(id), fetchPosts(id)]);

// results[i] is either
//   { status: "fulfilled", value: <resolved value> }
//   { status: "rejected",  reason: <error> }

const ok = results
  .filter((r) => r.status === "fulfilled")
  .map((r) => r.value);

const failures = results
  .filter((r) => r.status === "rejected")
  .map((r) => r.reason);

for (const id of orderIds) {
  await processOrder(id); // one at a time, in order
}

// Broken: finishes instantly, results are never awaited
orderIds.forEach(async (id) => {
  await processOrder(id);
});

// Fix A: sequential and ordered
for (const id of orderIds) {
  await processOrder(id);
}

// Fix B: concurrent, collect every result
await Promise.all(orderIds.map((id) => processOrder(id)));

// Timeout: whichever settles first wins
const data = await Promise.race([
  fetchData(),
  new Promise((_, reject) =>
    setTimeout(() => reject(new Error("timeout")), 3000)
  ),
]);

// First successful mirror, failures ignored
const fastest = await Promise.any([
  fetch("https://mirror-1.example.com/file"),
  fetch("https://mirror-2.example.com/file"),
]);

async function inChunks(items, size, worker) {
  const out = [];
  for (let i = 0; i < items.length; i += size) {
    const chunk = items.slice(i, i + size);
    out.push(...(await Promise.all(chunk.map(worker))));
  }
  return out;
}

const users = await inChunks(userIds, 10, fetchUser);

When to use the visualizer

Model the code you actually have: one task per real call, durations set to what you see in the network panel or your traces.