パフォーマンスを考慮した同期処理【Javascript】

async awaitを用いると、非同期であるJavascriptの処理を同期的に処理することができます。
しかし、何も考えずにawaitを連ねてしまうと、無駄な待ち時間が発生してしまうため注意が必要です。

商品Aと商品Bを購入する流れを例に考えてみましょう。

• 商品Aをカゴに入れる
• 商品Bをカゴに入れる
• 支払いをする

これを単にawaitを連ねて記述すると次のようになります。

async function buyAB() {
  await 商品Aをカゴに入れる
  await 商品Bをカゴに入れる
  支払いをする
}

この関数の問題点は、従属関係にない、AとBをカゴに入れるという処理が同期的に処理されていることです。
同期的に処理されるべきところは、カゴに全ての商品を入れ終わる、支払いをする、この2つの処理です。

それを踏まえて修正すると次のようになります。

async function buyAB() {
  const buyA = 商品Aをカゴに入れる
  const buyB = 商品Bをカゴに入れる
  await Promise.all([buyA, buyB])
  支払いをする
}

Promise.all([])内に記述された処理が全て完了するのをawaitするだけです。
宣言された変数に代入する時点で処理は開始されているため、
待ち時間が少なくなります。