JavaScript パフォーマンス

Volardev 編集部 April 18, 2026

1. ループ内のアクティビティを減らす

プログラミングにおいてループ（Loops）は頻繁に使用されますが、パフォーマンスのボトルネックになりやすい箇所でもあります。
for 文自体を含むループ内の各ステートメントは、ループの反復ごとに実行されます。
ループの外に配置できるステートメントや代入処理を移動させるだけで、ループの実行速度は向上します。

悪い例：

for (let i = 0; i < arr.length; i++) {
  // 処理
}

より良い例：

let l = arr.length;
for (let i = 0; i < l; i++) {
  // 処理
}

悪い例では、ループが反復されるたびに配列の length プロパティにアクセスしています。
より良い例では、ループの外で length プロパティを変数に格納しているため、ループの実行が高速化されます。

2. DOMアクセスを減らす

HTML DOM へのアクセスは、他の JavaScript ステートメントと比較して非常に低速です。
同じ DOM 要素に複数回アクセスすることが予想される場合は、一度アクセスしてローカル変数（Local variable）として保持し、それを再利用するようにしてください。

使用例：

// DOM要素を一度変数に格納する
const obj = document.getElementById("demo");
obj.innerHTML = "こんにちは";

3. DOMのサイズを小さくする

HTML DOM 内の要素数は、可能な限り少なく保つようにしましょう。
これにより、ページの読み込みが改善され、特に低スペックなデバイスでのレンダリング（ページ表示）速度が向上します。
getElementsByTagName のような DOM 検索処理も、DOM サイズが小さいほど効率的に動作します。

4. 不要な変数を避ける

値を保存しておく必要がない場合は、新しい変数を作成しないでください。
多くの場合、次のようなコードは：

let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

このように簡略化できます：

document.getElementById("demo").innerHTML = firstName + " " + lastName;

5. JavaScriptの読み込みを遅らせる

スクリプトをページボディ（<body>）の最下部に配置することで、ブラウザが先にページコンテンツを読み込めるようになります。
スクリプトのダウンロード中、ブラウザは他のダウンロードを開始せず、さらにパース（解析）やレンダリングのアクティビティがブロックされる可能性があります。

HTTP 仕様では、ブラウザが並列でダウンロードすべきコンポーネントは2つまでと定義されています。

代替案として、<script> タグで defer="true" を使用する方法があります。defer 属性は、ページのパースが完了した後にスクリプトを実行するよう指定するものですが、これは外部スクリプトにのみ有効です。

可能であれば、ページが読み込まれた後にコードによってスクリプトを追加することも検討してください。

使用例：

<script>
window.onload = function() {
  const element = document.createElement("script");
  element.src = "myScript.js";
  document.body.appendChild(element);
};
</script>

6. with の使用を避ける

with キーワードの使用は避けてください。実行速度に悪影響を与えるだけでなく、JavaScript のスコープ（Scopes）を複雑にする原因となります。
なお、with キーワードはストリクトモード（Strict mode）では使用が禁止されています。