How I can improve execution time of recursive promise on Edge? On chrome it is almost instantenous for 100000 records

Question

In code snippet below the promise is recursively called after completion of itself. I ran the following code snippet on Edge and on Chrome and am seeing a marked difference in execution time. Is there something wrong that I am doing? How I can improve the execution time on Edge?

Please ignore the promise 'anti-pattern'. It is just to simulate an asynchronous method.

Chrome result - Count - 99999 Start 1512416096194 last update 1512416096509 End 1512416096577 recursiveFnReturnsPromise finished

execution time - 397ms

Edge result - Count - 99999 Start 1512415183349 last update 1512415508413 End 1512415907219 recursiveFnReturnsPromise finished

execution time between the start and the end- 723870ms

execution time between last the DOM update and the end- 398806ms

//large array
let aValues = Array(100000);

//utility function
function writeln(text) {
  let p = document.createElement('div');
  p.innerText = text;
  document.getElementById('v1').appendChild(p);
}


writeln('Start ' +Date.now()); //note start recursion time

recursiveFnReturnsPromiseV1(aValues, 1).then(function() {
  writeln('End ' +Date.now());//note end recursion time
  writeln('recursiveFnReturnsPromise finished');
}, function() {
  writeln('End' +Date.now());
  writeln('recursiveFnReturnsPromise failed');
})

//the recursive functions which returns a promise
function recursiveFnReturnsPromiseV1(pValues, ix) {
  if (pValues.length <= ix)
    return Promise.resolve();

  return new Promise(function(c, e) {
    document.getElementById('output').innerText = ix;
    if(ix==99999) writeln('last update ' +Date.now());
    c();
  }).then(function() {
    return recursiveFnReturnsPromiseV1(pValues, ++ix);
  })
}

Count - <span id='output'></span>
<div id='v1'></div>

Note - for anyone interested in trying to do promise recursion right please see related post - What is the difference in following pattern to call recursive JavaScript function which returns a promise?

Answer 1

Even without interacting with the DOM, Promises are dramatically slower in Firefox.

(async()=>{
  let start = Date.now();
  for (let i = 0; i < 1e6; i++) await Promise.resolve();
  let end = Date.now();
  console.log(end-start, 'ms');
})();

On my machine, this completes in 0.25 seconds in Node.js, 6 seconds in Chrome, and 16 seconds in Firefox. (I don't have Edge).

I would avoid iterating over an excessive number of Promises. It should be doable — in any realistic code the majority of wall clock time will be spent rendering updates in the browser or waiting for asynchronous calls to complete, and only a small fraction will be in actually executing the asynchronous calls themselves. Perform more work synchronously if that's the case.

This is slightly faster for some reason:

(async()=>{
  let start = Date.now();
  await Promise.all(Array(1e6).fill(Promise.resolve()));
  let end = Date.now();
  console.log(end-start, 'ms');
})();

1 second in Node.js, 2.5 seconds in Chrome, 4 seconds in Firefox. (And in fact, the bulk of the work is in actually building the array, I get <1 second if I move that outside the timed section.)

Using Promise.all might be faster because the script produces the work all at once, but waiting for it to complete does not enter the interpreter (to a very rough approximation). That might be a good workaround if Promises are not as fast as they are in V8.

Answer 2

It may have something to do with Chrome optimizing paints so when I add an element to dom and then change style in 2 different resolve functions it is handled as one action (one paint) depending how quickly the 2 dom interaction requests were made.

The following won't animate in Chrome:

const el = document.querySelector("#content");
Promise.resolve(el)
.then(
  _=>
    el.innerHTML = `
    <div style="position:absolute;top:100px;transition:top 2s;">hello world</div>
    `
)
.then(
  _ =>
    // setTimeout(x=>el.querySelector("div").style.top = "2px",100)
    el.querySelector("div").style.top = "2px"
);

<div id="content">
</div>

If that one animates in Edge that means your appendChild and innerText causes thousands of paints in edge but doesn't in Chrome, the following will animate in Chrome and Firefox because getBoundingClientRect will flush scheduled changes to the dom, you could use this if add and/or animate elements in a promise chain:

const el = document.querySelector("#content");
Promise.resolve(el)
.then(
  _=>{
    el.innerHTML = `
    <div style="position:absolute;top:100px;transition:top 2s;">hello world</div>
    `;
    //this will trigger paint as well (in case you do want to animate)
    //  it will flush changes to the dom before getting bounding
    el.getBoundingClientRect();
  }
)
.then(
  _ =>
    // setTimeout(x=>el.querySelector("div").style.top = "2px",100)
    el.querySelector("div").style.top = "2px"
);

<div id="content">
</div>