パフォーマンス改善の秘訣！JavaScriptの最適化テクニック集

JavaScriptのコードが遅くてストレスを感じたことはないでしょうか？ページの読み込みが遅かったり、スクロールがカクついたりする原因の多くは、最適化されていないJavaScriptにあります。本記事では、パフォーマンスを向上させるためのテクニックを紹介します。

1. 変数のスコープを意識して最適化

変数のスコープ管理を適切に行うことで、メモリ使用量を減らし、不要な処理を防ぐことができます。

// 不適切な例（グローバル変数を使う）
var globalVar = "これは非推奨";

function example() {
  globalVar = "値が変更される";
}

グローバル変数はメモリリークの原因になるため、letやconstを使い、必要最小限のスコープにすることが推奨されるます。

// 適切な例（ブロックスコープを活用）
function example() {
  let localVar = "これは安全";
  console.log(localVar);
}

2. DOM操作の最適化

DOM操作は処理が重いため、無駄な更新を減らすことで高速化できます。

❌ 避けるべき例（毎回DOMを更新する）

for (let i = 0; i < 1000; i++) {
  document.body.innerHTML += `<p>${i}</p>`;
}

✅ 効率的な例（Fragmentを活用）

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  let p = document.createElement("p");
  p.textContent = i;
  fragment.appendChild(p);
}
document.body.appendChild(fragment);

3. イベントのデリゲーションを活用

多数の要素に個別でイベントリスナーを追加すると、パフォーマンスが低下します。親要素にイベントを設定し、イベントのバブリングを活用することで最適化できます。

document.getElementById("list").addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log(`クリックされたアイテム: ${event.target.textContent}`);
  }
});

4. 不要な計算を減らす

ループや関数の中で毎回計算を行うのは非効率になります。

// 非効率なコード
for (let i = 0; i < arr.length; i++) {
  console.log(arr.length); // 毎回配列の長さを計算
}

// 最適化したコード
const len = arr.length;
for (let i = 0; i < len; i++) {
  console.log(len);
}

5. 非同期処理の最適化

大量のデータを扱う場合、同期処理のままでは遅くなるでしょう。 setTimeoutやrequestAnimationFrameを活用すると、処理を分割してスムーズに動作させることができます。

function processLargeData(data) {
  let i = 0;
  function processChunk() {
    let chunkSize = 100;
    while (i < data.length && chunkSize--) {
      console.log(data[i]);
      i++;
    }
    if (i < data.length) {
      setTimeout(processChunk, 0);
    }
  }
  processChunk();
}