[JavaScript] テンプレートリテラルと文字列連結のパフォーマンス比較

背景

文字列の連結には、テンプレートリテラルか文字列連結を使うかいずれかの方法がある。可読性的にはテンプレートリテラルの方が良いが、パフォーマンス的には単なる文字列連結の方が良い。

実際にどれぐらい差があるのか比較してみる。

方法

以下の3つの方法で文字列を連結するコードをベンチマークする。

• テンプレートリテラル

  const url = `/${slug}.html`;
  

• 文字列連結

  const url = '/' + slug + '.html';
  

• 配列を使った文字列連結

  const url = ['/', slug, '.html'].join('');
  

各手法で100万回の文字列連結し、その処理速度を測定する。

const slug = '1234567890';

// Template Literal
for (let i = 0; i < 1000000; i++) {
  const url = `/${slug}.html`;
}

// String Concatenation
for (let i = 0; i < 1000000; i++) {
  const url = '/' + slug + '.html';
}

// String Concatenation with Array
for (let i = 0; i < 1000000; i++) {
  const url = ['/', slug, '.html'].join('');
}

ベンチマーク結果

JavaScriptエンジが異なる3つのブラウザでそれぞれベンチマークを実行した。

• Chrome
• Firefox
• Safari

複数回実行した結果、大きなブレがなかったため平均値ではなく、いくつかのサンプリングの中の1つを表記する。

Benchmark: Template literals vs String concat vs Array.join()

Chrome

文字列連結が最速、配列を使った文字列連結が最遅。

Firefox

文字列連結が最速、配列を使った文字列連結が最遅。

Safari

テンプレートリテラルと文字列連結はほぼ同じ速度（複数回ベンチマーク実行で逆転はあれど実行回数に差は出ず）。配列を使った文字列連結が最遅。
テンプレートリテラルの実行が最適化されている可能性がある。

感想

• ブラウザによって差はあるが、基本的には文字列連結が最速
  • ただし、テンプレートリテラルは可読性が高いため、パフォーマンスが問題になる場合以外はテンプレートリテラルを使うと良いと思われる
• Safariではテンプレートリテラルと文字列連結はほぼ同じ速度
• 配列を使った文字列連結は遅いので避けるべき（可読性も悪い）
  • 頻繁に項目が追加されるようなデータの場合に利用されるケースが多いが、配列が増えるたびにパフォーマンスは落ちていくため、あまり採用はお勧めしない