JavaScriptのパフォーマンス
JavaScriptのコードを高速化する方法。
ループ内のアクティビティを減らす
ループはプログラミングでよく使用されます。
forステートメントを含むループ内の各ステートメントは、ループの反復ごとに実行されます。
ループの外側にステートメントや代入を配置できると、ループの実行が速くなります。
悪い例：
より良いコード:
不正なコードは、ループが反復されるたびに配列の長さプロパティにアクセスします。
より良いコードでは、ループの外側でlengthプロパティにアクセスし、ループの実行が高速になります。
DOMアクセスを減らす
HTMLDOMへのアクセスは、他のJavaScriptステートメントと比べて非常に遅くなります。
DOM要素に複数回アクセスすることが予想される場合は、一度アクセスして、ローカル変数として使用します。
DOMサイズを削減する
HTMLDOM内の要素の数を少なくしてください。
これにより、特に小型デバイスでのページの読み込みが常に改善され、レンダリング(ページ表示)が高速化されます。
DOMの検索(getElementsByTagNameなど)を試みるたびに、DOMを小さくすることでメリットが得られます。
不必要な変数を避ける
値を保存する予定がない場合は、新しい変数を作成しないでください。
多くの場合、次のようなコードを置き換えることができます:
これと一緒です。
JavaScriptの読み込みを遅らせる
ページ本文の下部にスクリプトを配置すると、ブラウザが最初にページを読み込むことができます。
スクリプトのダウンロード中、ブラウザは他のダウンロードを開始しません。さらに、すべての解析およびレンダリングのアクティビティがブロックされる可能性があります。
HTTP仕様では、ブラウザーが3つ以上のコンポーネントを並行してダウンロードしてはならないことが定義されています。
代わりに、defer="true"scriptタグで使用することもできます。defer属性は、ページの解析が完了した後にスクリプトを実行するように指定しますが、これは外部スクリプトに対してのみ機能します。
可能であれば、ページが読み込まれた後に、コードによってページにスクリプトを追加できます。
例
withの使用を避ける
withキーワードの使用は避けてください。速度に悪影響を及ぼします。また、JavaScript
スコープが乱雑になります。
このwithキーワードは厳密モードでは使用できません。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。