Promise.all for parallel execution in Node.js - Performance & Optimization

Performance: Promise.all for parallel execution

MEDIUM IMPACT

This affects how quickly multiple asynchronous tasks complete and how the event loop handles concurrency.

Running multiple asynchronous tasks and waiting for all to finish

Node.js

async function fetchParallel() {
  const results = await Promise.all([fetch(url1), fetch(url2)]);
  return results;
}

Tasks run in parallel, reducing total wait time to the longest single task duration.

📈 Performance GainReduces total wait time, improves input responsiveness (INP)

Running multiple asynchronous tasks and waiting for all to finish

Node.js

async function fetchSequential() {
  const result1 = await fetch(url1);
  const result2 = await fetch(url2);
  return [result1, result2];
}

Tasks run one after another, increasing total wait time and blocking event loop longer.

📉 Performance CostBlocks event loop longer, increases total wait time linearly with number of tasks

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Sequential await calls	N/A	N/A	Blocks event loop longer	[X] Bad
Promise.all parallel execution	N/A	N/A	Non-blocking, faster completion	[OK] Good

Rendering Pipeline

Promise.all schedules multiple asynchronous operations concurrently, allowing the event loop to handle them without blocking. This reduces waiting time before the next paint or interaction can occur.

→Event Loop

→Task Scheduling

→Rendering

⚠️ BottleneckWaiting for all promises to resolve before continuing can delay next UI update if tasks are sequential.

Core Web Vital Affected

INP

This affects how quickly multiple asynchronous tasks complete and how the event loop handles concurrency.

Optimization Tips

1Use Promise.all to run multiple async tasks in parallel for faster completion.

2Avoid awaiting promises sequentially to prevent blocking the event loop longer.

3Parallel execution with Promise.all improves interaction responsiveness (INP).

Performance Quiz - 3 Questions

What is the main performance benefit of using Promise.all for multiple async tasks?

A Runs tasks in parallel, reducing total wait time

B Runs tasks sequentially to avoid race conditions

C Blocks the event loop until all tasks finish

D Increases bundle size by adding extra code

DevTools: Performance

How to check: Record a performance profile while running your async code. Look at the timeline for long blocking tasks and how async tasks overlap.

What to look for: Shorter total blocking time and overlapping async tasks indicate better parallel execution.

Practice

1. What does Promise.all do in Node.js?

easy

A. Runs promises one after another in sequence

B. Runs only the first promise and ignores others

C. Runs multiple promises in parallel and waits for all to complete

D. Runs promises but returns results in random order

Solution

1. Step 1: Understand Promise.all behavior

   Promise.all runs all promises at the same time (in parallel) and waits until all finish.

2. Step 2: Check result order and completion

   It returns results in the order of the promises given, not random or sequentially one by one.

3. Final Answer:

   Runs multiple promises in parallel and waits for all to complete -> Option C

4. Quick Check:

   Promise.all = parallel run + wait all [OK]

Hint: Promise.all runs all promises together, not one by one [OK]

Common Mistakes:

• Thinking Promise.all runs promises sequentially
• Believing Promise.all returns results in random order
• Assuming Promise.all ignores failed promises

2. Which of the following is the correct syntax to use Promise.all with an array of promises named promises?

easy

A. Promise.all(promises).then(results => console.log(results));

B. Promise.all.then(promises).catch(error => console.log(error));

C. Promise.all(promises).catch(results => console.log(results));

D. Promise.all(promises).finally(results => console.log(results));

Solution

1. Step 1: Check Promise.all usage

   Promise.all is called as a function with an array of promises as argument.

2. Step 2: Verify chaining with then()

   To get results, use .then() after Promise.all to handle resolved values.

3. Final Answer:

   Promise.all(promises).then(results => console.log(results)); -> Option A

4. Quick Check:

   Correct syntax = Promise.all(array).then() [OK]

Hint: Use Promise.all(array).then() to get results [OK]

Common Mistakes:

• Using Promise.all.then(promises) instead of Promise.all(promises).then()
• Using catch() to handle results instead of errors
• Using finally() to get results instead of then()

3. What will be logged by this code?

const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = Promise.resolve(3);

Promise.all([p1, p2, p3]).then(results => console.log(results));

medium

A. Error: Promise rejected

B. [1, 2, 3]

C. [undefined, undefined, undefined]

D. [3, 2, 1]

Solution

1. Step 1: Understand resolved promises

   p1, p2, p3 are promises resolved immediately with values 1, 2, and 3.

2. Step 2: Promise.all returns array of results in input order

   Promise.all waits for all to resolve and returns results in the same order as input array.

3. Final Answer:

   [1, 2, 3] -> Option B

4. Quick Check:

   Promise.all results order = input order [OK]

Hint: Promise.all returns results in same order as input promises [OK]

Common Mistakes:

• Assuming results order depends on resolution speed
• Expecting reversed or random order
• Thinking Promise.all returns undefined values

4. Identify the error in this code snippet:

const p1 = Promise.resolve('A');
const p2 = Promise.reject('Error');

Promise.all([p1, p2])
  .then(results => console.log('Results:', results))
  .catch(error => console.log('Caught:', error));

medium

A. The catch block will run with 'Error' because p2 rejects

B. Promise.all will never reject even if one promise fails

C. The then block will run with partial results

D. Syntax error: Promise.reject cannot be used inside Promise.all

Solution

1. Step 1: Check behavior of Promise.all with rejected promises

   If any promise rejects, Promise.all immediately rejects with that error.

2. Step 2: Analyze catch and then blocks

   Since p2 rejects, the catch block runs with the error message 'Error'. The then block does not run.

3. Final Answer:

   The catch block will run with 'Error' because p2 rejects -> Option A

4. Quick Check:

   Promise.all rejects if any promise rejects [OK]

Hint: If one promise rejects, Promise.all rejects immediately [OK]

Common Mistakes:

• Thinking Promise.all ignores rejected promises
• Expecting then block to run with partial results
• Believing Promise.reject causes syntax error here

5. You want to fetch data from three APIs in parallel and process all results only if all succeed. Which code correctly uses Promise.all to achieve this?

const fetch1 = () => fetch('https://api1.example.com/data').then(res => res.json());
const fetch2 = () => fetch('https://api2.example.com/data').then(res => res.json());
const fetch3 = () => fetch('https://api3.example.com/data').then(res => res.json());

// Which code snippet correctly waits for all fetches and handles errors?

hard

A. Promise.all([fetch1(), fetch2(), fetch3()])
.then(results => console.error('All data:', results))
.catch(error => console.log('Fetch failed:', error));

B. Promise.all([fetch1, fetch2, fetch3])
.then(results => console.log('All data:', results))
.catch(error => console.error('Fetch failed:', error));

C. Promise.all(fetch1, fetch2, fetch3)
.then(results => console.log('All data:', results))
.catch(error => console.error('Fetch failed:', error));

D. Promise.all([fetch1(), fetch2(), fetch3()])
.then(results => console.log('All data:', results))
.catch(error => console.error('Fetch failed:', error));

Solution

1. Step 1: Check how to call fetch functions

   fetch1, fetch2, fetch3 are functions returning promises, so call them with () to get promises.

2. Step 2: Verify Promise.all usage and error handling

   Pass an array of promises to Promise.all, then use .then() to handle results and .catch() for errors.

3. Final Answer:

   Promise.all([fetch1(), fetch2(), fetch3()]) .then(results => console.log('All data:', results)) .catch(error => console.error('Fetch failed:', error)); -> Option D

4. Quick Check:

   Call functions to get promises, pass array to Promise.all [OK]

Hint: Call functions to get promises before Promise.all [OK]

Common Mistakes:

• Passing functions instead of calling them
• Passing multiple arguments instead of an array
• Swapping console.log and console.error in then/catch