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アクセスを減らします

JavaScriptの他の部分と比較して、HTML DOMへのアクセスは非常に遅いです。

もし特定のDOM要素に何度もアクセスする必要がある場合、一度だけアクセスし、それをローカル変数として使用してください：

インスタンス

var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello";

自分で試してみてください

DOMの規模を縮小します

HTML DOMの中の要素の数をなるべく少なく保つようにしてください。

これにより、ページのロードが向上し、レンダリング（ページの表示）が高速化されます。特に小さなデバイスではその効果が高まります。

DOMを検索しようとするたび（例えば getElementsByTagNameすべてが小さなDOMに利益を得ます。

不必要な変数を避けます

値を保存しない予定の新しい変数を作成しないでください。

通常、このコードを置き換えることができます：

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

このコードを使用してください：

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

JavaScriptのロードを遅延させます

ページの最下部にスクリプトを配置し、ブラウザがまずページをロードするようにしてください。

スクリプトのダウンロード中に、ブラウザは他のダウンロードを開始しません。また、すべての解析およびレンダリングアクティビティはブロックされる可能性があります。

HTTP 规範では、ブラウザが2種類以上の要素を並行してダウンロードしないことを定義しています。

オプションの一つは、script タグに 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 のスコープが混乱する可能性があります。

厳格モードで許可されていません with キーワード。