JavaScriptのパフォーマンス
JavaScriptコードを高速化する方法。
ループ内のアクティビティを減らす
ループはプログラミングでよく使用されます。
forステートメントを含むループ内の各ステートメントは、ループの反復ごとに実行されます。
ループの外側に配置できるステートメントまたは割り当てにより、ループの実行が速くなります。
悪い：
for (let i = 0; i < arr.length; i++) {
より良いコード：
let l = arr.length;
for (let i = 0; i < l; i++) {
不正なコードは、ループが繰り返されるたびに配列の長さプロパティにアクセスします。
より良いコードは、ループの外側の長さプロパティにアクセスし、ループの実行を高速化します。
DOMアクセスを減らす
HTML DOMへのアクセスは、他のJavaScriptステートメントと比較して非常に低速です。
DOM要素に複数回アクセスする場合は、1回アクセスして、ローカル変数として使用します。
例
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
DOMサイズを縮小する
HTMLDOMの要素数を少なくしてください。
これにより、特に小型のデバイスで、ページの読み込みが常に改善され、レンダリング（ページ表示）が高速化されます。
（getElementsByTagNameのような）DOMを検索しようとするたびに、より小さなDOMの恩恵を受けます。
不要な変数を避ける
値を保存する予定がない場合は、新しい変数を作成しないでください。
多くの場合、次のようなコードを置き換えることができます。
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
これとともに：
document.getElementById("demo").innerHTML = firstName + " " + lastName;
JavaScriptの読み込みを遅らせる
スクリプトをページ本文の下部に配置すると、ブラウザは最初にページをロードできます。
スクリプトのダウンロード中、ブラウザは他のダウンロードを開始しません。さらに、すべての解析およびレンダリングアクティビティがブロックされる可能性があります。
HTTP仕様では、ブラウザが3つ以上のコンポーネントを並行してダウンロードしてはならないことが定義されています。
defer="true"別の方法は、scriptタグで使用することです。defer属性は、ページの解析が終了した後にスクリプトを実行する必要があることを指定しますが、これは外部スクリプトに対してのみ機能します。
可能であれば、ページが読み込まれた後、コードでスクリプトをページに追加できます。
例
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
での使用は避けてください
withキーワードの使用は避けてください。速度に悪影響を及ぼします。また、JavaScriptスコープが乱雑になります。
withキーワードはstrictモードでは許可されていません。