javascript - Performance of Promise.all and for-await-of - Stack Overflow

admin管理员组

文章数量:1345891

Under the assumption that all the promises resolve, is asynchronous iteration (for-await-of loop) faster than using Promise.all?

From the specification on asynchronous iteration:

Each time we access the next value in the sequence, we implicitly await the promise returned from the iterator method.

Using asynchronous iteration:

let pages = [fetch('/echo/json/'), fetch('/echo/html/'), fetch('/echo/xml/')]
for await (let page of pages) {
    console.log(page)
}

Using Promise.all:

let pages = await Promise.all([fetch('/echo/json/'), fetch('/echo/html/'), fetch('/echo/xml/')])

pages.forEach(page => console.log(page))

Both of them fetch the pages in parallel but I'm wondering if asynchronous iteration starts looping before all the pages are finished fetching. I have tried throttling the network in my browser's devtools to simulate this but any differences were still too little to be noticed.

Under the assumption that all the promises resolve, is asynchronous iteration (for-await-of loop) faster than using Promise.all?

From the specification on asynchronous iteration:

Each time we access the next value in the sequence, we implicitly await the promise returned from the iterator method.

Using asynchronous iteration:

let pages = [fetch('/echo/json/'), fetch('/echo/html/'), fetch('/echo/xml/')]
for await (let page of pages) {
    console.log(page)
}

Using Promise.all:

let pages = await Promise.all([fetch('/echo/json/'), fetch('/echo/html/'), fetch('/echo/xml/')])

pages.forEach(page => console.log(page))

Both of them fetch the pages in parallel but I'm wondering if asynchronous iteration starts looping before all the pages are finished fetching. I have tried throttling the network in my browser's devtools to simulate this but any differences were still too little to be noticed.

• javascript
• asynchronous
• promise
• async-await

Share Improve this question Follow edited Aug 19, 2018 at 10:53 rink.attendant.6 asked Aug 19, 2018 at 10:15 rink.attendant.6rink.attendant.6 46.4k6464 gold badges110110 silver badges157157 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

Is asynchronous iteration (for-await-of loop) faster than using Promise.all?

No. Both the loop and Promise.all will finish when the last promise resolves, which will be roughly at the same time. If the last promise that resolves is the first promise in the array, then Promise.all finishes immeadiately while the loop still has to iterate the other elements which might cause a small overhead but that should not matter. The only situation were it really matters is:

If one of the promises gets rejected, Promise.all exits immeadiately, while the loop has to reach that promise.

I'm wondering if asynchronous iteration starts looping before all the pages are finished fetching.

Yes you could get the first results a bit earlier, but all results will be available at the same time. Using the for loop would make sense if you want to show the data to the user, as he can start reading while the rest is still fetching, if you however want to accumulate the data it makes sense to await them all as it simplifies the iteration logic.

I think you don't need to await also this is not the fastest way to fetch and write data to console:

let pages = Promise.all([fetch('/echo/json/'), fetch('/echo/html/'), fetch('/echo/xml/')])
pages.then((page) => {console.log(page)});

Because pages.then() will wait for each promise to be settled.

But you can fetch data async as you did above. And write them to the console without waiting before pages. Like this:

 var sequence = Promise.resolve();
 ['/echo/json/','/echo/html/','/echo/xml/'].forEach(function(url) {
   sequence.then(function() {
      return fetch(url);
    })
    .then((data) => {console.log(data)});
  });

But above code does not think about order of pages. If order of pages is a matter for you. You can try this and this is the fastest way to fetch data and show them in order:

var sequence = Promise.resolve();

      // .map executes all of the network requests immediately.
      var arrayOfExecutingPromises =  
      ['/echo/json/','/echo/html/','/echo/xml/'].map(function(url) {
        return fetch(url);
      });

     arrayOfExecutingPromises.forEach(function (request) {
    // Loop through the pending requests that were returned by .map (and are in order) and
    // turn them into a sequence.
    // request is a fetch() that's currently executing.
    sequence = sequence.then(function() { 
      return request.then((page) => {console.log('page')});
    });
  });

Part of the problem is that if you use for-await-of on an array of promises, you iterate over it in the specified order, doesn't matter if the next promise in the given array is resolved before the previous one:

const sleep = time => new Promise(resolve => setTimeout(resolve, time));

(async function () {
    const arr = [
        sleep(2000).then(() => 'a'),
        'x',
        sleep(1000).then(() => 'b'),
        'y',
        sleep(3000).then(() => 'c'),
        'z',
    ];

    for await (const item of arr) {
        console.log(item);
    }
}());

Output:

➜  firstefirstserved git:(main) node examples/for-await-simple.js 
a
x
b
y
c
z

But sometimes - as in your question, you want to process the results as soon as the promises yield them. So I decided to write an async iterator to make for await to work in a first promise to resolve is first to be served way. Here is the code:

async function* frstcmfrstsvd(promises) {
  let resolver = []

  // create an array sortedByFulfillment of pending promises and make available their resolvers in the resolver array
  let sortedByFulfillment = []
  for (let i = 0; i < promises.length; i++) {
    sortedByFulfillment.push(new Promise((res, rej) => {
      resolver.push(res)
    }))
  }

  promises.forEach((p, i) => {
    Promise.resolve(p).then(r => { 
      // resolve the first pending promise on the sortedByFulfillment array 
      let res = resolver.shift()
      res({ value: r, index: i, status: 'fulfilled' })
    }, err => {
      let res = resolver.shift()
      res({ reason: err, index: i, status: 'rejected' })
    })
  })

  for await (let result of sortedByFulfillment) {
    yield result
  }
}

export default frstcmfrstsvd

You can find the full code in the npm package frstcmfrstsvd.

No exhaustive tests yet, but at first view, performance of Promise.allSettled seems to be a bit better:

➜  node examples/performance-reject-frstcmfrstsvd.mjs
frstcmfrstsvd: 308.914ms
allsettled: 309.254ms
➜  node examples/performance-reject-frstcmfrstsvd.mjs
frstcmfrstsvd: 306.977ms
allsettled: 309.917ms
➜  node examples/performance-reject-frstcmfrstsvd.mjs
frstcmfrstsvd: 308.531ms
allsettled: 303.636ms
➜  node examples/performance-reject-frstcmfrstsvd.mjs
frstcmfrstsvd: 310.559ms
allsettled: 307.805ms
➜  node examples/performance-reject-frstcmfrstsvd.mjs
frstcmfrstsvd: 309.94ms
allsettled: 308.318ms

See file examples/performance-reject-frstcmfrstsvd.mjs

Therefore, the conclusion of all this experiment seems to be that as @jonas-wilms says they both roughly finish at the same time

本文标签： javascriptPerformance of Promiseall and forawaitofStack Overflow