JavaScriptの実行効率・パフォーマンス向上計画_JavaScriptスキル

JavaScript の実行効率とパフォーマンスを向上させる方法は、フロントエンド開発において非常に重要な部分です。このセクションでは、日々のプロジェクト作業の中で JavaScript のパフォーマンスと動作効率を向上させる方法を検討します。

Loop
Loop は非常に一般的に使用される制御構造であり、JavaScript では for(;;) 、 while() 、 for を使用できます。 (in) の 3 種類のループがありますが、実際には、この 3 種類のループのうち for (in) はハッシュ キーをクエリする必要があるため効率が非常に悪いため、できるだけ使用せず、できるだけ長く使用する必要があります。 。 for(;;) と while ループのパフォーマンスは、(日常的に使用する場合には) 基本的に同等であると言えます。

実は、この 2 つのループの使い方は非常に特殊です。最終的な結論は次のとおりです。

ループ変数が増加または減少している場合は、ループ変数のみに値を割り当てないでください。最後に読み取られるときに、ネストされた演算子または -- 演算子を使用する必要があります。配列の長さで比較したい場合は、事前に配列の長さ属性をローカル変数に入れておくとクエリ数が減ります。たとえば、arr が配列であると仮定すると、要素を走査する最良の方法は次のとおりです:

コードをコピー コードは次のとおりです:

for(var i=0, len = arr.length;i

または、順序が重要でない場合:

コードをコピー コードは次のとおりです。

for(var i=arr.length;i>0;i--){ ...}

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

Eval を使用しないでください eval を使用すると、実行時にコンテンツを実行するために解釈エンジンを再度呼び出すことになります。このとき、関数テンプレートは非常に時間がかかります。 JavaScript でサポートされているクロージャを使用して実装できます (クロージャの内容については、関数型プログラミングの関連内容を参照してください)


オブジェクト検索を削減します JavaScript の解釈可能性のため、 a.b.c.d.e では、少なくとも 4 つのクエリ操作が必要です。次に、a で b をチェックし、次に b で c をチェックするというようになります。そのため、このような式が繰り返し発生する場合は、そのような式をできるだけ最小限に抑える必要があります。ローカル変数を使用して、クエリ用の一時的な場所を入力できます。これは、文字列や配列の長さに基づいてループする必要があり、通常は毎回長さが変更されないため、ループと組み合わせることができます。 a.length をクエリする場合、追加のループを追加して操作を実行し、事前に var len=a.length を設定する必要があります。


String connection 文字列を追加する場合は、s=s anotherStr を使用するのではなく、s =. anotherStr 操作を使用するのが最善です。複数の文字列を接続する場合は、s =a;s = などを使用する必要があります。 b;s =c; と書く必要があり、文字列を収集したい場合は、 =less を使用する必要があります。たとえば、同じ文字列に対して = 操作を複数回実行する場合は、キャッシュを使用するのが最適です。使い方は次のように 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() を呼び出すことをお勧めします。 ) メソッドは 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() はクエリと関数呼び出しを追加します。

DOM ノードを作成する
通常、ノードを作成するために HTML を直接記述するのに文字列を使用します。実際、そうすることは

コードの有効性を保証できません。 🎜>
文字列操作の効率が低い

そのため、ドキュメント内に既製のテンプレート ノードがある場合は、 document.createElement() メソッドを使用する必要があります。 createElement() メソッドを使用した後、要素の属性を複数回設定する必要があります。 cloneNode() を使用すると、属性設定の数を減らすことができます。同様に、多数の要素を作成する必要がある場合は、最初にテンプレート ノードを準備する必要があります。


Timer 継続的に実行されるコードを対象とする場合は、setTimeout を使用せず、setInterval を使用する必要があります。 setTimeout は毎回タイマーをリセットします。


その他 スクリプト エンジン
私のテストによると、Microsoft の JScript の効率は、実行速度とメモリ管理の両方の点で Mozilla の Spidermonkey よりもはるかに悪いです。現在は基本的に更新もされていません。ただし、SpiderMonkey は ActiveXObject を使用できません。


ファイルの最適化 ダウンロードを高速化するには、すべてのスペースとコメントを削除してコードを 1 行にまとめることも非常に効果的な方法です。解析の速度ではなく速度がローカルの場合、コメントとスペースは解釈と実行の速度に影響しません。
要約: たとえば、ローカル変数はグローバル変数よりも高速で、直接変数は実行時にオブジェクトを構築するよりも高速です。 複数のクエリが必要なクエリを最初にキャッシュするなど、実行数をできるだけ減らします。可能な限り、文字列連結などの組み込み言語機能を使用してください。これらの API はコンパイルされたバイナリコードであり、実行効率が高いため、システムが提供する API をできるだけ使用してください。 同時に、ここでは説明しませんが、計算構造の調整など、いくつかの基本的なアルゴリズムの最適化も JavaScript で使用できます。

JavaScript は解釈されるため、通常、バイトコードは実行時に最適化されません。そのため、これらの最適化は依然として非常に重要です。 JavaScript の実行速度を向上させる方法に興味がある場合は、JavaScript のパフォーマンスの向上に関するこの Web サイトの他の記事も参照してください。