JavaScript スクリプトのパフォーマンス最適化に関する考慮事項_JavaScript スキル

ループは非常に一般的に使用される制御構造であり、JavaScript ではほとんどの処理がループに依存しています。実際には、for(;;)、while()、および for(in) の 3 種類のループを使用できます。ループの種類 for(in) はハッシュ キーをクエリする必要があるため効率が非常に悪いため、使用は最小限に抑える必要があります。 for(;;) と while ループのパフォーマンスは、(日常的に使用する場合には) 基本的に同等であると言えます。
実は、この 2 つのループの使い方は非常に特殊です。テスト中にいくつか興味深い状況がありました。付録を参照してください。最終的な結論は次のとおりです。
ループ変数が増加または減少している場合は、ループ変数のみに値を割り当てないでください。最後に読み取られるときに、ネストされた or - 演算子を使用する必要があります。
配列の長さで比較したい場合は、事前に配列の長さ属性をローカル変数に入れておくとクエリ数が減ります。
ローカル変数とグローバル変数
グローバル変数は実際にはグローバルオブジェクトのメンバーであり、ローカル変数はスタック上に配置されるため、グローバル変数よりもアクセス速度が速くなります。その中の機能について。
Eval を使用しない
eval を使用すると、実行時に解釈エンジンを再度呼び出してコンテンツを実行することと同じになり、時間がかかります。現時点では、関数テンプレートは JavaScript でサポートされているクロージャを使用して実装できます (クロージャの詳細については、関数型プログラミングの関連コンテンツを参照してください)
オブジェクト検索の削減
の解釈可能性のためJavaScript では、a.b.c.d.e として、少なくとも 4 つのクエリ操作を実行する必要があります。最初に a をチェックし、次に a で b をチェックし、次に b で c をチェックするというようになります。したがって、そのような式が繰り返し現れる場合は、そのような式をできるだけまれに保つ必要があり、ローカル変数を使用して、それらの式をクエリ用の一時的な場所に置くことができます。
これは、文字列と配列の長さに基づいてループする必要があり、通常はこの長さが変更されないため、ループと組み合わせることができます。たとえば、a.length がクエリされるたびに、追加の操作を実行する必要があります。事前に var len=a.length を設定すると、クエリが 1 つ少なくなります。
文字列連結
文字列を追加する場合は、s=s anotherStr を使用する代わりに、s =anotherStr 操作を使用するのが最善です。
複数の文字列を接続する場合は、
s =a;s =b;s =c; のように =less を使用する必要があります。
s =a b c; のように記述する必要があります。 🎜> そして、文字列を収集する場合、たとえば、同じ文字列に対して = 演算を複数回実行する場合は、キャッシュを使用するのが最善です。使い方は次のように JavaScript 配列を使用して収集し、最後に join メソッドを使用して接続します。
var buf = new Array();for(var i = 0; i
型変換 JavaScript は動的に型付けされるため、型変換は誰もが犯しやすい間違いです。言語が異なり、変数のタイプを指定することはできません。 1. 数値を文字列に変換し、「" を使用します。 1. 見た目は少し悪くなりますが、実際にはパフォーマンスの点でこれが最も効率的です。
("" ) > String() > . ) > new String()
これは実際には、以下の「直接量」と多少似ていますが、実行時に使用されるユーザー操作よりも高速になるようにコンパイル時に使用できる内部操作を使用してください。
String() は内部関数であるため非常に高速ですが、.toString() はプロトタイプ内の関数をクエリするため、正確なコピーを返すために new String() を使用するほど高速ではありません。
2. 浮動小数点数を整数に変換すると、よりエラーが発生しやすくなります。実際、parseInt() は浮動小数点数と整数の間ではなく、文字列を数値に変換するために使用されます。 Math.floor() または Math.round() を使用する必要があります。
また、セクション 2 のオブジェクト検索の問題とは異なり、Math は内部オブジェクトであるため、実際には Math.floor() のクエリメソッドと呼び出し時間が少なく、最も高速です。
3. カスタム オブジェクトの場合、型変換用に toString() メソッドが定義されている場合は、内部操作ですべての可能性を試した後、オブジェクトの toString() が試行されるため、明示的に toString() を呼び出すことをお勧めします。 String に変換できるかどうかを確認するため、このメソッドを直接呼び出す方が効率的です。

直接量を使用する
実際、この影響は比較的小さいため無視できます。直接量を使用するとはどういう意味ですか? たとえば、JavaScript は配列を直接表現するために [param, param, param,...] を使用することをサポートしていました。以前は new Array(param, param,...) を使用していました。前者を使用するとエンジンによって直接解釈されますが、後者は配列の内部コンストラクターを呼び出す必要があるため、若干高速になります。 同様に、var foo = {} は var foo = new Object(); より高速で、var reg = /../; は var reg=new RegExp() より高速です。

文字列トラバーサル操作
JavaScript 自体のループ速度が比較的遅く、正規表現の演算が遅いため、文字列に対して置換や検索などのループ操作を実行するには正規表現を使用する必要があります。式 C言語で書かれたAPIであり、非常に性能が良いです。
高度なオブジェクト
カスタムの高度なオブジェクトと Date および RegExp オブジェクトは、構築に多くの時間を消費します。再利用できる場合は、キャッシュを使用する必要があります。
DOM 関連
HTML の挿入
多くの人は、JavaScript で document.write を使用してページのコンテンツを生成することを好みます。実際、これは効率が低くなります。HTML を直接挿入する必要がある場合は、div または span を指定するなどのコンテナー要素を見つけて、独自の HTML コードをページに挿入するように innerHTML を設定できます。
オブジェクトクエリ
[""]クエリを使用すると、.items()よりも高速になります。これは、.items()を呼び出すと1つ追加されるという以前のアイデアと同じです。クエリと関数呼び出しにさらに時間がかかります。
DOM ノードを作成する
通常、HTML を直接記述してノードを作成する場合、
コードの有効性は保証できません
String。操作効率が低い
したがって、 document.createElement() メソッドを使用する必要があります。また、ドキュメント内に既製のテンプレート ノードがある場合は、 createElement() を使用した後、 cloneNode() メソッドを使用する必要があります。要素の属性についても、 cloneNode() を使用すると属性の設定数を減らすことができます。同様に、多数の要素を作成する必要がある場合は、最初にテンプレート ノードを準備する必要があります。
タイマー
常に実行されるコードを対象とする場合は、setTimeout ではなく setInterval を使用する必要があります。 setTimeout は毎回タイマーをリセットします。
その他
スクリプト エンジン
私のテストによれば、Microsoft の JScript の効率は、実行速度とメモリ管理の両方の点で Mozilla の Spidermonkey よりもはるかに悪いです。JScript は基本的にそうではないからです。現在更新されています。ただし、SpiderMonkey は ActiveXObject を使用できません。
ファイルの最適化
ファイルの最適化も、ダウンロードを高速化するために、すべてのスペースとコメントを削除して 1 行にまとめる非常に効果的な方法です。解析速度ではなくダウンロード速度が重要です。ローカルの場合、コメントとスペースは解釈と実行速度に影響しません。
概要
この記事は、JavaScript プログラミングで JavaScript の実行パフォーマンスを向上させるために私が見つけた方法のいくつかをまとめたものです。実際、これらの経験はいくつかの原則に基づいています。
既製のものを使用する方が速いです。ローカル変数はグローバル変数よりも高速で、直接変数はオブジェクトの実行時構築よりも高速です。
複数のクエリが必要なクエリを最初にキャッシュするなど、実行数をできるだけ減らします。
文字列リンクなど、組み込みの言語機能をできる限り使用します。
これらの API はコンパイルされたバイナリ コードであり、実行効率が高いため、システムによって提供される API をできる限り使用してください。
同時に、JavaScript では、操作構造については、ここでは詳しく説明しません。ただし、JavaScript は解釈されるため、通常、バイトコードは実行時に最適化されないため、これらの最適化は依然として非常に重要です。
もちろん、ここで紹介したテクニックの一部は他のインタープリター言語でも使用されており、それらを参照することもできます。