Test 1 - Recursive Fibonacci

The first test is using a recursive Fibonacci function. Using a recursive function as a test case here means we will get a compounding overhead from the promises. This result will show us a relatively worse case example.

The following code has been used,

// Normal case
function fibonacci(num) {
  if (num <= 1) return 1;
  return fibonacci(num - 1) + fibonacci(num - 2);
}
for (let i = 0; i < 10; i++) {
  fibonacci(i);
}

// Promise case
async function fibonacci(num) {
  if (num <= 1) return 1;
  return (await fibonacci(num - 1)) + (await fibonacci(num - 2));
}
for (let i = 0; i < 10; i++) {
  // The site does not allow top-level await calls, however it waits for all
  // promises to resolve before completing, making this relatively okay to do.
  fibonacci(i).then(() => {});
}

When running this on JSBench.Me, the promise case is shown to be 86% slower on Chrome 87 than the non-promise case.

While this is an unrealistic case, it shows that promises can significantly impact performance, especially in hot code paths.

Test 2 - Non-Recursive Fibonacci

A non-recursive Fibonacci sequence shows what sort of overhead a low-cost method call could have to get a more real-world view. In this case, each call to the function will only have the overhead of a single promise.

The following code has been used,

// Normal case
function fibonacci(num) {
  var a = 1,
    b = 0,
    temp;
  while (num >= 0) {
    temp = a;
    a = a + b;
    b = temp;
    num--;
  }
  return b;
}
for (let i = 0; i < 100; i++) {
  fibonacci(i);
}

// Promise case
async function fibonacci(num) {
  var a = 1,
    b = 0,
    temp;
  while (num >= 0) {
    temp = a;
    a = a + b;
    b = temp;
    num--;
  }
  return b;
}
for (let i = 0; i < 100; i++) {
  fibonacci(i).then(() => {});
}

When running this on JSBench.Me, the promise case is shown to be 81% slower on Chrome 87 than the non-promise case.

This result shows that adding an async modifier to the method can almost double the time it takes to execute simple functions. For hot code, this could make a significant difference.

Test 3 - Promise vs Async/Await

So we've seen what just adding the async keyword can do, but what if we use promises directly instead?

Using async code from the previous test case, and the following code,

// Promise case
function fibonacci(num) {
  return new Promise((resolve, reject) => {
    var a = 1,
      b = 0,
      temp;
    while (num >= 0) {
      temp = a;
      a = a + b;
      b = temp;
      num--;
    }
    resolve(b);
  });
}
for (let i = 0; i < 100; i++) {
  fibonacci(i).then(() => {});
}

When running this on JSBench.Me, the case using promises rather than async/await is shown to be a further 26% slower on Chrome 87 than the async/await case.