[译] javascript 提升执行速度小技巧

• 原文地址：JavaScript Quick Tip — Avoid Serial Request Waterfalls
• 原文作者：Eric Elliott

经常出现并严重影响应用程序性能的一个问题是，可能会意外地以串行方式获取本来可以并行获取的数据。不要在任何使用Promise的地方都使用await。相反，请考虑获取依赖项。如果要获取多个内容，请确保尽可能并行获取。这将对应用程序的性能产生巨大的影响。

下面是示例代码，供大家参考：

// setup
const wait = value => new Promise(resolve => {
  setTimeout(() => resolve(value), 3000);
});
  
const fetchFoo = () => wait('foo');
const fetchBar = () => wait('bar');
const fetchBaz = () => wait('baz');

const fetchDataSlowly = async time => {
  // Bad. Requests run in serial waterfall.
  const foo = await fetchFoo();
  const bar = await fetchBar();
  const baz = await fetchBaz();
  return { foo, bar, baz, time: Date.now() - time };
};

fetchDataSlowly(Date.now())
  .then(({ foo, bar, baz, time }) => {
    console.log('fetched slowly:', foo, bar, baz, time
    );
  });

  
const fetchDataQuickly = async time => {
  // Good. Fetches run in parallel.
  const [
    foo,
    bar,
    baz
  ] = await Promise.all([
    fetchFoo(),
    fetchBar(),
    fetchBaz()
  ]);
  return { foo, bar, baz, time: Date.now() - time };
};

fetchDataQuickly(Date.now())
  .then(({ foo, bar, baz, time}) => {
    console.log('fetched quickly:', foo, bar, baz, time);
  });


const fetchDataQuickly2 = async time => {
  // Also good.
  const fooReady = fetchFoo();
  const barReady = fetchBar();
  const bazReady = fetchBaz();

  const foo = await fooReady;
  const bar = await barReady;
  const baz = await bazReady;
  return { foo, bar, baz, time: Date.now() - time };
};

fetchDataQuickly2(Date.now())
  .then(({ foo, bar, baz, time}) => {
    console.log('fetched quickly:', foo, bar, baz, time);
  });