JavaScript パフォーマンストラップのまとめ (例付き)_JavaScript スキル

1. eval または関数コンストラクターの使用を避ける
2.
との併用を避ける 3. 重要なパフォーマンス要件を持つ関数では try-catch-finally を使用しない
4. グローバル変数の使用を避ける
5.重要なパフォーマンス要件を持つ関数で for-in を使用する
6. 文字列累積計算スタイルを使用する
7. setTimeout() および setInterval() を設定するときに、元の操作が高速になります。文字列の代わりに関数名を使用
9. オブジェクト内で不必要な DOM 参照の使用を避ける
10. 目標速度を最も明確にし、スコープ チェーンを最小限に抑える
11. スクリプト内で使用するコメントを減らし、長い変数名の使用を避ける
12. アプリケーションの外部変数を現在のスコープに保存します
13. 変数を使用して値をキャッシュします


1. eval または関数コンストラクターの使用を回避します eval または関数コンストラクターは非常に高価であり、毎回スクリプト エンジンがソース コードを実行可能コードに変換する必要があります。
さらに、eval を使用して文字列を処理する場合は、実行時に解釈する必要があります。

実行速度が遅いコード:

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

function addMethod(object, property, code) {
object[property] = new Function(code);
}
addMethod(myObj, 'methodName', 'this.localVar=foo') ;

より高速に実行されるコード:

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

function addMethod(object, property, func) {
object[property] = func;
}
addMethod(myObj, 'methodName', function () { 'this.localVar =foo'; });

2.
との併用は非常に便利ですが、上位と下位のスコープがわからないため、追加の検索時間が必要になります。コンパイル時に。
実行速度が遅いコード:

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

with (test.object) {
foo = 'オブジェクトの foo プロパティの値';
bar = 'オブジェクトの bar プロパティの値';


実行速度が速くなります コード:

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

var myObj = test .object;

myObj.foo = 'オブジェクトの foo プロパティの値';
myObj.bar = 'オブジェクトの bar プロパティの値';

で try-catch-finally を使用します。 try-catch-finally は、実行時に毎回現在のスコープに新しい変数を作成します。これは、ステートメント実行時に例外を割り当てるために使用されます。
例外処理は、ループの外側など、例外がそれほど頻繁に発生しないスクリプト内の高レベルで実行する必要があります。

可能であれば、try-catch-finally の使用を完全に避けるようにしてください。
実行速度が遅いコード:



コードをコピー

コードは次のとおりです: var object = ['foo', 'bar'], i; for (i = 0; i try { // をスローする何かを行うanException

} catch (e) {

// 例外を処理します
}
}


より高速なコードを実行します:

コードをコピー

コードは次のとおりです。 var object = ['foo', 'bar'], try { for (i = 0; i // 何かを実行します

}

} catch (e) {
// 例外を処理します
}



4. グローバル変数の使用を避ける

関数または他のスコープでグローバル変数を使用する場合、スクリプト エンジンはそれらを見つけるためにスコープ全体を走査する必要があります。
グローバル スコープの変数はスクリプトのライフサイクル全体を通じて存在し、ローカル スコープの変数はローカル スコープが失われると破棄されます。

実行速度が遅いコード:


コードをコピー

コードは次のとおりです: var i, str = ''; function globalScope() { for (i=0; i }

}
globalScope();


より高速に実行されるコード:

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

localScope( ) {
var i,
str =
for (i=0; i str = i;
}
}

localScope();

5. パフォーマンスが重要な for-in

for-in 関数の使用を避ける要件 in ループでは、スクリプト エンジンがすべての列挙可能なプロパティのリストを作成し、それらが前のプロパティと重複しているかどうかを確認する必要があります。
for ループ スコープ内のコードが配列を変更しない場合は、配列の長さを事前に計算し、それを使用して for ループ内で配列を反復できます。

実行速度が遅いコード: コードをコピー

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


var sum = 0;
for (var i in arr) {
sum = arr[i];

}

より高速なコードを実行します: コードをコピー

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


var sum = 0
for (var i = 0; , len = arr .length; i sum = arr[i]>}

6. >
演算を使用すると、メモリ内に新しい文字列が作成され、それに連結された値が割り当てられます。結果を変数に代入するだけです。 結果の中間変数の接続を避けるために、= を使用して結果を直接代入できます。

実行速度が遅いコード:

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

a = 'x' 'y';

より高速なコードを実行します:

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

a = 'x'; a = 'y';

7. 🎜> パフォーマンスが重要なループや関数では、代替のプリミティブ操作を使用することを検討してください。
実行速度が遅いコード:

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

var min = Math .min(a, b);

arr.push(val);


より高速なコードを実行します:

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

var min = a

8. setTimeout() と setInterval() を設定する場合、文字列の代わりに関数名を渡します

setTimeout() または setInterval() に文字列を渡す場合、文字列は eval によって計算され、速度が遅くなります。
代わりに匿名関数ラッパーを使用して、コンパイル時に解釈して最適化できるようにします。 実行速度が遅いコード:
setInterval('doSomethingPeriodally()', 1000);
setTimeOut('doSomethingAfterFiveSeconds()', 5000);

より高速に実行されるコード:




コードをコピーします

コードは次のとおりです。 >setTimeOut (doSomethingAfterFiveSeconds, 5000); 9. オブジェクト内で不必要な DOM 参照を使用しないでください:

コードをコピーします

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

var car = new Object(); .color = " red";
car.type = "sedan"

より良い形式:

コードをコピー


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

var car = {
color : "red";
type : "sedan"

} 10. 最も明確なターゲット速度、スコープチェーンを最小限に抑える

非効率な方法:

コードをコピー

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

var url = location.href;

効率的な形式:

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

var url = window.location.href;

11. スクリプト内のコメントの使用量を減らしてください。長い変数名
を使用する場合、特に関数、ループ、配列ではコメントをできるだけ少なくするか、使用を避けてください。
コメントはスクリプトの実行を不必要に遅くし、ファイル サイズを増加させます。例:

非推奨形式:

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

function someFunction()
{
var person_full_name="somename"; /* フルネームを格納します*/
}

より良い書き方:

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

function someFunction()
{
var name= "somename";
}

12. 関数実行時、アプリケーションの外部変数を現在のスコープに格納します、実行中のコンテキストが渡されます。アクティブなオブジェクトには、コンテキスト チェーンの先頭にプッシュされるすべてのローカル変数が含まれます。
スコープチェーンでは、最も遅いものは明確に識別された識別子であり、ローカル変数が最も速いことを意味します。頻繁に使用される外部変数の読み取りと書き込みが大幅に高速化されます。これは、グローバル変数やその他の詳細な識別子の検索で特に顕著です。 同様に、現在のスコープ内の変数 (var myVar) は、プロパティ (this.myVar) などのオブジェクトよりも高速にアクセスされます。

実行速度が遅いコード:

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

function doSomething(text) {

var divs = document.getElementsByTagName('div'),
text = ['foo', /* ... n ... */, ' bar'];
for (var i = 0, l = divs.length; i divs[i].innerHTML =
}
}


より高速に実行されるコード:

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

function doSomethingFaster(text) {

var doc = document,
divs = doc.getElementsByTagName('div'),
text = ['foo', /* ... n ... */, 'bar'];
for (var i = 0, l = divs.length; i divs[i].innerHTML = text [i];
}
}


大きなループ内の要素 (head など) にアクセスする必要がある場合は、ローカル DOM アクセス (たとえば、例のように）。

より高速に実行されるコード:

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

doSomethingElseFaster( ) {
var get = document.getElementsByTagName;
for (var i = 0, i get('head')
}
}

13. 変数を使用して値をキャッシュする
繰り返しの作業が行われる場所では、ローカル変数を使用して値をキャッシュします。
次の一連の例は、ローカル変数に値を格納することの広範な影響を示しています。

例 1. 変数を使用して、計算実行前にループ本体に数学関数を格納します
間違った方法:

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

var d=35;
for (var i=0; iy = Math.sin( d)*10 ;
}

より良い処理:

コードをコピー コードは次のように:

var d = 55;
var math_sind = Math.sin(d)*10;
for (var i=0; iy = math_sind ;
}

例 2. ループ内で
を使用して配列の長さを保存する:
配列の長さが再計算されます。毎回

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

for (var i = 0; i
// 何かをします


より良い改善:
より良い方法は、配列の長さを保存することです

コードをコピーします コードは次のとおりです次のように:

for (var i = 0, len = arr.length; i // 何かを実行します
}

合計 一般的に一度やっておけば、無駄な作業を繰り返し行う必要はありません。たとえば、計算式の値がスコープまたは関数内で複数回使用される場合、それを変数に保存すると、その値を複数回使用できるようになります。そうでない場合は、変数を宣言して、適用される値のみを割り当てるというやりすぎになります。一度。したがって、これらのことを念頭に置いてください。

補足:
ポイント 2
ちなみに、JS はコンパイルではなく解釈されますが、表現には影響しませんが、学術的に厳密である方が良いです。 🎜 >
ポイント 6: これは間違った形式ですか?
a = 'x' 'y';
より高速なコードを実行します:

a = 'y'; ';

9. オブジェクト内での不要な DOM 参照の使用を避ける
new Object も DOM 参照ですか?
これは、new Object() と new Array () を軽々しく使用すべきではないことを意味します。 、 new Function() は通常、{...}、[...]、f = function(..){...} を使用します。つまり、
これは上記の点と同じである必要があります。

最後に、JS のすべての数値演算 (JS エンジン レベル) はすべて浮動小数点計算に変換されるため、使用するビット演算を少なくする必要があることを付け加えておきます。ゆっくりしてください。