JS パフォーマンス最適化ノート検索とorganization_javascript スキル

パフォーマンスの最適化については、オンラインで情報を検索して確認してください。最適化プロセス中の参考のために簡単にまとめました。質問がある場合は、時間内に質問して、対応する追加の変更を加えてください。

1. コードを簡潔にします。いくつかの単純な式でも適切な最適化が行われます。

例: x=x 1; 関数に影響を与えずに x と省略できます。 > 2. 変数名とメソッド名は、セマンティクスに影響を与えずにできるだけ単純にしてください。 (最初の文字で名前を付けることもできます)

例: 定義された配列の長さには、ArrayLength の代わりに ArrLen という名前を付けることができます。

3. JS ループに関しては、ループは一般的に使用されるプロセス コントロールです。

JS は、for(;;)、while()、for(in) の 3 種類のループを提供します。これら 3 種類のループの中で、for(in) はハッシュ キーをクエリする必要があるため、最も効率が低くなります。そのため、for(;;) および while のパフォーマンスはできるだけ少なくする必要があります。 () ループは基本的に同じです。もちろん、ループ変数が増加または減少する場合は、ループ変数に値を代入せず、代わりにネストされた or – 演算子を使用することをお勧めします。

4. 配列を走査する必要がある場合は、配列の長さに対する複数のクエリを避けるために、最初に配列の長さをキャッシュし、その配列の長さをローカル変数に入れる必要があります。

多くの場合、文字列と配列の長さに基づいてループする必要があり、通常、この長さは変更されないため、たとえば、a.length をクエリするたびに、追加の操作を実行して var len を設定する必要があります。 = 事前に a.length を指定すると、クエリが 1 つ少なくなります。

5. グローバル変数の代わりにローカル変数を使用してみてください。

ローカル変数のアクセス速度は、グローバル変数のアクセス速度よりも高速です。これは、グローバル変数は実際にはウィンドウ オブジェクトのメンバーであるのに対し、ローカル変数は関数のスタックに配置されるためです。

6. eval はできるだけ使用しないでください。

eval を使用するたびに時間がかかりますが、このとき、JS でサポートされているクロージャを使用して関数テンプレートを実装できます。

7. オブジェクト検索を削減します

JavaScript の解釈性のため、 a.b.c.d.e では、最初に a をチェックし、次に a で b をチェックし、次に b で c をチェックする必要があります。等々。したがって、そのような式が繰り返し現れる場合は、そのような式をできるだけまれに保つ必要があり、ローカル変数を使用して、それらの式をクエリ用の一時的な場所に置くことができます。

8. 文字列の連結。

文字列を追加する場合は、s=s anotherStr を使用する代わりに、s =anotherStr 操作を使用するのが最善です。

複数の文字列を接続したい場合は、s =a;s =b;s =c; のように =less を使用する必要があります。
複数の文字列などの文字列を収集する 同じ文字列に対して = 操作を複数回実行する場合は、キャッシュを使用するのが最善です。使い方は？次のように、JavaScript 配列を使用して収集し、最後に join メソッドを使用して接続します。

コードをコピー コードは次のとおりです。 🎜> var buf = new Array();for(var i = 0; i

9. 型変換

1. "" を使用して数値を文字列に変換します。 1. 見た目は少し悪くなりますが、実際にはパフォーマンスの点でこれが最も効率的です: ("" ) > ; String() > .toString() > new String()

実行時に使用されるユーザー操作よりも高速になるように、コンパイル時に使用できる内部操作を使用するようにしてください。

String() は内部関数であるため非常に高速ですが、 .toString() はプロトタイプ内の関数をクエリする必要があるため、 new String() を使用して結果を返すほど高速ではありません。正確なコピー。

2. 浮動小数点数を整数に変換する場合、多くの人は parseInt() を使用することを好みます。実際には、parseInt() は浮動小数点数と整数の間ではなく、文字列を数値に変換するために使用されます。間で変換するには、Math.floor() または Math.round() を使用する必要があります。 Math は内部オブジェクトであるため、Math.floor() は実際にはメソッドのクエリと呼び出しにあまり時間がかからず、最も高速です。

3. カスタム オブジェクトの場合、型変換用に toString() メソッドが定義されている場合は、内部操作ですべての可能性を試した後でオブジェクトを試行するため、明示的に toString() を呼び出すことをお勧めします。 ) メソッドは String に変換できるかどうかを確認しようとするため、このメソッドを直接呼び出す方が効率的です

10. var obj=new Object() メソッドの代わりに、JSON 形式を使用してオブジェクトを作成してみてください。

前者は直接コピーされるのに対し、後者はコンストラクターを呼び出す必要があるため、前者のパフォーマンスが優れています。

11. 配列を使用する必要がある場合は、JSON 形式の構文を使用してください。つまり、次の構文を使用して配列を定義します。 : [parrm, param, param.. .]、構文 new Array(parrm, param, param...) を使用する代わりに。 JSON 形式を使用した構文はエンジンによって直接解釈されるためです。後者では、Array コンストラクターを呼び出す必要があります。

12. 正規表現を使用して、置換や検索などの文字列のループ操作を実行します。

JS のループ速度は比較的遅く、正規表現の操作は C で書かれた API であるため、パフォーマンスが優れています。

13. HTML の挿入

多くの人は、JavaScript で document.write を使用してページのコンテンツを生成することを好みます。実際、これは効率が低くなります。HTML を直接挿入する必要がある場合は、div または span を指定するなどのコンテナー要素を見つけて、独自の HTML コードをページに挿入するように innerHTML を設定できます。

14. オブジェクトクエリ

[""] クエリを使用すると、.items()

15. Timer

の場合、コードは常にSetTimeout は使用しないでください。setInterval を使用する必要があります。 setTimeout は毎回タイマーをリセットします。

16. DOM 呼び出しを最小限に抑える

Web 開発において、JavaScript の非常に重要な役割は DOM を操作することです。ただし、DOM での操作はブラウザにリフロー操作を実行させるため、非常にコストがかかります。 DOM 操作を可能な限り減らす必要があります。
リフロー操作は主にいくつかの状況で発生します:
* フォームのサイズの変更
* フォントの変更
* スタイルシート ブロックの追加と削除
* 入力テキストであってもコンテンツの変更入力ボックス内
* 次のような CSS 仮想クラスがトリガーされます: hover
* 要素の className を変更します
* 操作の追加または削除、またはコンテンツの変更が DOM ノードで実行されるとき。
* スタイルを動的に設定する場合 (element.style.width="10px" など)。
* offsetWidth、clientHeight、その他の計算が必要な CSS 値にアクセスするなど、計算が必要なサイズ値を取得する場合
問題解決の鍵は DOM によるリフローの回数を制限することです操作:
1. 現在の DOM を操作する前に、N 回の作成と 1 回の書き込みを確保するために、できるだけ多くの準備作業を行います。
2. DOM を操作する前に、現在の DOM 構造から操作対象の要素を削除します。
2.1. 削除は、removeChild() または replaceChild() によって実現します。
2.2. この要素の表示スタイルを「なし」に設定します。

3.CSS 部分
リフロー操作が頻繁に発生するもう 1 つの状況は、element.style.backgroundColor = "blue" などの style 属性を使用して要素の外観を変更することです。
毎回要素が変更されると、style 属性によって確実にリフロー操作がトリガーされます。この問題を解決するには、次の方法があります。
3.1. className を変更して style.xxx=xxx を置き換える方法を使用します。
3.2. style.cssText = ''; を使用してスタイルを一度記述します。
3.3. あまりにも多くのインライン スタイルを設定しないようにします
3.4. 追加された追加の構造要素の位置を固定または絶対に設定するようにしてください
3.5. レイアウトにテーブルを使用しないようにします
3.6. JavaScript 式 (IE のみ)
4. 取得した DOM データをキャッシュします。このメソッドは、リフロー操作をトリガーするプロパティ (offsetWidth など) を取得する場合に特に重要です。
5. HTMLCollection オブジェクトを操作する場合、アクセス数を可能な限り最小限に抑える必要があります。これにより、ループの効率が大幅に向上します。 。

17.

メソッド呼び出しをリファクタリングするか、js ファイルをマージして、外部リンクを使用して

を使用することがよくあります。ファイルのヘッダーに次のコードが表示されます:







ほとんどの場合、上記のコードはcan は次のように簡略化されます:



ここで、a.js/b.js は d で参照されます。 js /c.js. document.write メソッドを介して書き込まれます。

18. 大きな JS オブジェクトの場合、作成時間とスペースのオーバーヘッドが比較的大きいため、キャッシュを可能な限り考慮する必要があります。

19. スクリプトを一番下に配置します。

スクリプトは通常、ユーザー操作に使用されます。js ファイルをロードする前に、ページがロードされるまで待つことをお勧めします。したがって、スクリプトは CSS の逆であり、スクリプトはページの下部に配置する必要があります。

20. JavaScript の空白領域を削除する 関連ツールを使用して空白のコメントなどを削除できます。すべての名前を 1 文字または 2 文字に変更すると、大幅な改善が得られます。 (ただし、将来のメンテナンスを容易にするために、未承認のバックアップ ファイルを保持する必要があります)