Sequential vs Parallel await in JavaScript

Sequential vs Parallel await in JavaScript

await can be used sequentially or in parallel. Knowing the difference is key for performance.

Sequential await (Slow)

async function main() {
  const a = await fetchA(); // 1 second
  const b = await fetchB(); // 1 second
  const c = await fetchC(); // 1 second
  // total: 3 seconds
}

Each await waits for the previous one. Total time is the sum.

Parallel await (Fast)

async function main() {
  const [a, b, c] = await Promise.all([fetchA(), fetchB(), fetchC()]);
  // total: 1 second (all run at once)
}

Promise.all starts all at once. Total time is the longest operation.

When to Use Sequential

When operations depend on each other:

const user = await fetchUser(id);
const posts = await fetchPosts(user.id); // needs user.id

When to Use Parallel

When operations are independent:

const [user, settings] = await Promise.all([fetchUser(id), fetchSettings()]);

await in Loops

// sequential (slow for independent items)
for (const url of urls) {
  const data = await fetch(url);
  process(data);
}

// parallel (fast for independent items)
const results = await Promise.all(urls.map((url) => fetch(url)));
results.forEach(process);

The Takeaway

Use sequential await when operations depend on each other. Use Promise.all with await for parallel independent operations. In loops, use Promise.all with .map for parallel. Parallel is much faster for independent operations.