Promises for cleaner async in Node.js - Performance & Optimization

Performance: Promises for cleaner async

MEDIUM IMPACT

This concept affects how asynchronous operations impact the event loop and responsiveness of the application.

Handling asynchronous operations without blocking the event loop

Node.js

function fetchData() {
  return new Promise((resolve, reject) => {
    asyncHttpRequest('https://api.example.com/data', (err, data) => {
      if (err) reject(err);
      else resolve(data);
    });
  });
}
fetchData().then(result => console.log(result));

Promises allow non-blocking async calls, freeing the event loop to handle other tasks and user input.

📈 Performance GainNo event loop blocking, improves input responsiveness (INP)

Handling asynchronous operations without blocking the event loop

Node.js

function fetchData() {
  const data = syncHttpRequest('https://api.example.com/data');
  return data;
}
const result = fetchData();
console.log(result);

Synchronous HTTP request blocks the event loop, causing the app to freeze until the response arrives.

📉 Performance CostBlocks event loop, causing high input delay and poor responsiveness

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Synchronous blocking call	N/A	Blocks event loop	Blocks rendering	[X] Bad
Async with Promises	N/A	Non-blocking	No blocking, smooth rendering	[OK] Good

Rendering Pipeline

Promises schedule async callbacks without blocking the main thread, allowing the event loop to continue processing other events.

→Event Loop

→Task Queue

→Microtask Queue

⚠️ BottleneckBlocking synchronous calls that halt the event loop

Core Web Vital Affected

INP

This concept affects how asynchronous operations impact the event loop and responsiveness of the application.

Optimization Tips

1Avoid synchronous blocking calls for async operations to keep the event loop free.

2Use Promises to handle async tasks without freezing the UI or server responsiveness.

3Check for long tasks blocking the main thread using DevTools Performance panel.

Performance Quiz - 3 Questions

Why are Promises better than synchronous calls for async operations in Node.js?

A They prevent blocking the event loop, improving responsiveness.

B They reduce the size of the application bundle.

C They automatically cache data to speed up loading.

D They increase CPU usage to finish tasks faster.

DevTools: Performance

How to check: Record a performance profile while triggering the async operation. Look for long tasks blocking the main thread.

What to look for: Check for long blocking tasks in the Main thread timeline; absence indicates good async usage.

Practice

1. What is the main purpose of using Promises in Node.js?

easy

A. To store data permanently on disk

B. To make the program run faster by using multiple CPUs

C. To write synchronous code only

D. To handle asynchronous tasks without freezing the program

Solution

1. Step 1: Understand asynchronous tasks

   Asynchronous tasks take time and can block the program if not handled properly.

2. Step 2: Role of Promises

   Promises allow handling these tasks without freezing the program by running code after the task finishes.

3. Final Answer:

   To handle asynchronous tasks without freezing the program -> Option D

4. Quick Check:

   Promises manage async tasks = A [OK]

Hint: Promises help avoid freezing during slow tasks [OK]

Common Mistakes:

• Thinking Promises speed up code execution
• Confusing Promises with synchronous code
• Believing Promises store data permanently

2. Which of the following is the correct way to create a Promise in Node.js?

easy

A. const p = Promise(() => { resolve(); });

B. const p = new Promise((resolve, reject) => { /* code */ });

C. const p = new Promise(resolve, reject);

D. const p = Promise.new((resolve, reject) => { });

Solution

1. Step 1: Check Promise constructor syntax

   The Promise constructor requires a function with two parameters: resolve and reject.

2. Step 2: Validate each option

   const p = new Promise((resolve, reject) => { /* code */ }); correctly uses new Promise with a function taking resolve and reject.

3. Final Answer:

   const p = new Promise((resolve, reject) => { /* code */ }); -> Option B

4. Quick Check:

   Correct Promise syntax = B [OK]

Hint: Use 'new Promise' with (resolve, reject) function [OK]

Common Mistakes:

• Omitting 'new' keyword
• Passing resolve and reject outside a function
• Using incorrect Promise constructor syntax

3. What will the following code output?

const promise = new Promise((resolve) => {
  setTimeout(() => resolve('Done'), 100);
});
promise.then(result => console.log(result));
console.log('Start');

medium

A. Start only

B. Done\nStart

C. Start\nDone

D. Done only

Solution

1. Step 1: Understand asynchronous setTimeout

   The setTimeout delays resolve by 100ms, so 'Done' logs after delay.

2. Step 2: Order of console logs

   'Start' logs immediately, then after 100ms 'Done' logs from the promise.

3. Final Answer:

   Start\nDone -> Option C

4. Quick Check:

   Async delay means 'Start' first, then 'Done' [OK]

Hint: Immediate logs appear before delayed Promise results [OK]

Common Mistakes:

• Assuming Promise resolves immediately
• Expecting 'Done' before 'Start'
• Ignoring asynchronous behavior of setTimeout

4. Identify the error in this Promise code:

const p = new Promise((resolve, reject) => {
  resolve('Success');
  reject('Error');
});
p.then(result => console.log(result))
 .catch(error => console.log(error));

medium

A. Calling reject after resolve has no effect

B. Missing catch block for errors

C. Promise constructor missing 'new' keyword

D. resolve and reject parameters are reversed

Solution

1. Step 1: Understand Promise state changes

   Once a Promise is resolved or rejected, further calls to resolve or reject are ignored.

2. Step 2: Analyze code behavior

   The code calls resolve first, so reject after that does nothing.

3. Final Answer:

   Calling reject after resolve has no effect -> Option A

4. Quick Check:

   Promise settles once; later calls ignored [OK]

Hint: Promise settles once; ignore calls after resolve/reject [OK]

Common Mistakes:

• Expecting both resolve and reject to run
• Forgetting Promise settles only once
• Confusing order of resolve and reject calls

5. You want to run two async tasks one after another using Promises. Which code correctly chains them to run sequentially?

hard

A. task1().then(() => task2()).then(result => console.log(result));

B. Promise.all([task1(), task2()]).then(results => console.log(results));

C. task1(); task2(); console.log('Done');

D. task1().catch(() => task2()).then(result => console.log(result));

Solution

1. Step 1: Understand sequential chaining

   To run tasks one after another, call the second in the first's .then() callback.

2. Step 2: Analyze options

   task1().then(() => task2()).then(result => console.log(result)); chains task2 after task1 completes, ensuring order.

3. Final Answer:

   task1().then(() => task2()).then(result => console.log(result)); -> Option A

4. Quick Check:

   Chain with .then() for sequential async tasks [OK]

Hint: Use .then() chaining to run tasks one after another [OK]

Common Mistakes:

• Using Promise.all for sequential tasks (runs parallel)
• Calling tasks without chaining (runs parallel)
• Misusing catch to run second task