JavaScript パフォーマンス

❮ 前章へ 次章へ ❯

JavaScript コードをどうスピードアップするか。

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

ループは、よくプログラミングに使用します。

for 文を含むループ内の各ステートメントは、ループの繰り返しごとに実行されます。

ステートメントや代入をループ外に置くと、ループの実行を高速化します。

悪い：

var i;
for (i = 0; i < arr.length; i++) {

より良いコード：

var i;
var l = arr.length;
for (i = 0; i < l; i++) {

悪いコードは、ループが繰り返されるたびに配列の length プロパティにアクセスします。

良いコードは、ループ外で length プロパティにアクセスし、ループの実行をより速くします。

DOMへのアクセスを減らす

HTML DOM へのアクセスは、他の JavaScript ステートメントに比べると非常に時間がかかります。

DOM 要素に何度もアクセスする予定の場合は、一度アクセスしてローカル変数として使用します：

例

var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Try it Yourself »

DOM サイズを小さくする

HTML DOM の要素数を少なくしてください。

これにより、常にページの読み込みが向上し、特に小さなデバイスでレンダリング（ページ表示）が高速化します：

DOM を検索（getElementsByTagNameなど）しようとすると、DOM が小さくなれば恩恵を受けます。

不要な変数を避ける

値を保存しない場合は、新しい変数を作成しないでください。

次のようなコードを置き換えることができます：

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

こちらを使う：

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

JavaScript ロードの遅延

スクリプトをページ body の一番下に置くと、ブラウザは最初にページを読み込むことができます。

スクリプトをダウンロードしている間、ブラウザは他のダウンロードを開始しません。 さらに、すべてのパースやレンダリングアクティビティがブロックされます。

HTTP 仕様では、ブラウザは2つ以上のコンポーネントを並行してダウンロードすべきでないと定義しています。

スクリプト・タグで defer="true" を使用する方法もあります。 defer 属性は、ページのパースが終了した後にスクリプトを実行するように指定するものですが、外部スクリプトに対してのみ機能します。

可能であれば、ページがロードされた後に、コードでスクリプトをページに追加するようにします：

例

<script>
window.onload = downScripts;

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

with の使用を避ける

with キーワードの使用は避けてください。速度に悪影響を及ぼします。 また、JavaScript スコープが混乱します。

strict モードでは、with キーワードは使用できません。


❮ 前章へ 次章へ ❯