JavaScript がコードのパフォーマンスを向上させる方法の概要-jsチュートリアル-php.cn

JavaScript がコードのパフォーマンスを向上させる方法の概要

伊谢尔伦

リリース： 2017-07-26 13:47:32

オリジナル

1253 人が閲覧しました

文字列累積計算スタイルを使用する

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

ゆっくり実行されるコード:

a += &#39;x&#39; + &#39;y&#39;;

ログイン後にコピー

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

a += &#39;x&#39;; a += &#39;y&#39;;

ログイン後にコピー

プリミティブ操作は関数呼び出しよりも高速になります
パフォーマンス要件が重要なループや関数の実行では、代替プリミティブの使用を検討してください。
動作が遅いコード:

var min = Math.min(a, b); 
arr.push(val);

ログイン後にコピー

より速く動作するコード:

var min = a < b ? a : b; 
arr[arr.length] = val;

ログイン後にコピー

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

In setTimeout() に文字列を渡す場合) または setInterval() を使用すると、文字列が eval 計算されるため、速度が低下します。
代わりに匿名関数ラッパーを使用して、コンパイル時に解釈して最適化できるようにします。

実行速度が遅いコード:

setInterval(&#39;doSomethingPeriodically()&#39;, 1000); 
setTimeOut(&#39;doSomethingAfterFiveSeconds()&#39;, 5000);

ログイン後にコピー

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

setInterval(doSomethingPeriodically, 1000); 
setTimeOut(doSomethingAfterFiveSeconds, 5000);

ログイン後にコピー

オブジェクト内で不要な DOM 参照を使用しないでください:

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

ログイン後にコピー

より良い形式:

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

ログイン後にコピー

C最も知識のない目標速度、スコープチェーンを最小限に抑える

非効率的な方法:

var url = location.href;

ログイン後にコピー

効率的な形式:

var url = window.location.href;

ログイン後にコピー

スクリプト内で使用するコメントを減らし、長い変数名を避けるようにしてください

コメントを最小限に抑えるか、可能な限り避けてください特に関数、ループ、配列内で。

コメントはスクリプトの実行を不必要に遅くし、ファイルサイズを増加させます。例:
推奨されない形式:

function someFunction() 
{ 
var person_full_name="somename"; /* stores the full name*/ 
}

ログイン後にコピー

より良い書き方:

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

ログイン後にコピー

アプリケーションの外部変数を現在のスコープに保存します

関数が実行されると、実行中のコンテキスト、つまりアクティブなオブジェクトが渡されます。含まれるすべてのローカル変数は、コンテキストチェーンの先頭にプッシュされます。

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

function doSomething(text) { 
var ps = document.getElementsByTagName(&#39;p&#39;), 
text = [&#39;foo&#39;, /* ... n ... */, &#39;bar&#39;]; 
for (var i = 0, l = ps.length; i < l; i++) { 
ps[i].innerHTML = text[i]; 
} 
}

ログイン後にコピー

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

function doSomethingFaster(text) { 
var doc = document, 
ps = doc.getElementsByTagName(&#39;p&#39;), 
text = [&#39;foo&#39;, /* ... n ... */, &#39;bar&#39;]; 
for (var i = 0, l = ps.length; i < l; i++) { 
ps[i].innerHTML = text[i]; 
} 
}

ログイン後にコピー

大きなループ内の要素 (head など) にアクセスする必要がある場合は、ネイティブ DOM アクセス (例の get など) を使用します。もっと早く。

より高速なコードの実行:

function doSomethingElseFaster() { 
var get = document.getElementsByTagName; 
for (var i = 0, i < 100000; i++) { 
get(&#39;head&#39;); 
} 
}

ログイン後にコピー

変数を使用して値をキャッシュします

繰り返し作業を行う場所では、ローカル変数を使用して値をキャッシュします。

次の一連の例は、ローカル変数に値を格納することの広範な影響を示しています。
例 1. 計算実行前に変数を使用してループ本体に数学関数を格納する間違った方法:

var d=35; 
for (var i=0; i<1000; i++) { 
y += Math.sin(d)*10; 
}

ログイン後にコピー

より良い処理:

var d = 55; 
var math_sind = Math.sin(d)*10; 
for (var i=0; i<1000; i++) { 
y += math_sind; 
}

ログイン後にコピー

例 2. 配列の長さを保存してループで使用する

悪い処理:

配列の長さは毎回再計算されます

for (var i = 0; i < arr.length; i++) { 
// do something 
}

ログイン後にコピー

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

for (var i = 0, len = arr.length; i < len; i++) { 
// do something 
}

ログイン後にコピー

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

以上がJavaScript がコードのパフォーマンスを向上させる方法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。