JavaScriptコードのパフォーマンス最適化の概要
3460 ワード
以下のコードは基本的にjQueryのソースコードで見られますが、間違っているところがあれば指摘してください.
1.できるだけソース方式を使う
JAvaScriptは解釈言語であり,コンパイル言語よりも実行速度が遅い.ブラウザが実現した方法は、もう実現しないでください.また,ブラウザが実装した方法はアルゴリズムの面で多くの最適化が行われている.
2.グローバル検索を避ける
1つの関数では、グローバル変数へのアクセス速度がグローバル変数へのアクセス速度よりも速いため、グローバル変数として格納されるグローバル変数が使用されます.
eg:
3.できるだけサイクル数を減らす
サイクルを少なくすると、数倍のパフォーマンスが向上します.1つの配列の各要素を複数回操作する場合は、複数回ではなく、できるだけ1回のループ、複数回の操作を使用し、複数回のループごとに1回の操作を実行します.特に、複数の正規マッチングを行う場合、できるだけ正規表現をマージする場合は、できるだけ正規表現をマージし、1回の遍歴でできるだけ対応するマッチングを見つけます.
ループ
switch
4.条件分岐
条件を分岐し,可能性順に高から低に配列する:解釈器の条件に対する貪欲な回数を減らすことができる.
同じ条件>2ブランチの場合、switchの使用はif:switchブランチの選択よりも効率が高く、IEでは特に顕著である.4本のブランチのテスト、IEの下でswitchの実行時間は約ifの半分です.
三目演算代替条件分岐
5.タイマー
継続的に実行されるコードの場合、settimeoutではなくsetIntervalを使用する必要があります.settimeoutは毎回タイマを初期化しますが、setIntervalは開始時にタイマを初期化するだけです.
6.オブジェクトを作成する別の方法——Newを適用しない
7.タグとして使用される変数は、可能な限りブールタイプを使用します.
直接trueとfalseでマークし、数字や文字列の1と0でマークしないでください.
1.できるだけソース方式を使う
JAvaScriptは解釈言語であり,コンパイル言語よりも実行速度が遅い.ブラウザが実現した方法は、もう実現しないでください.また,ブラウザが実装した方法はアルゴリズムの面で多くの最適化が行われている.
2.グローバル検索を避ける
1つの関数では、グローバル変数へのアクセス速度がグローバル変数へのアクセス速度よりも速いため、グローバル変数として格納されるグローバル変数が使用されます.
eg:
<span style="white-space:pre"> </span>function search(){
<span style="white-space:pre"> </span> //
<span style="white-space:pre"> </span> alert(window.location.href + window.location.host);
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>// ,
<span style="white-space:pre"> </span>function search(){
<span style="white-space:pre"> </span>var location = window.location;
<span style="white-space:pre"> </span>alert(location.href + location.host);
<span style="white-space:pre"> </span>}
3.できるだけサイクル数を減らす
サイクルを少なくすると、数倍のパフォーマンスが向上します.1つの配列の各要素を複数回操作する場合は、複数回ではなく、できるだけ1回のループ、複数回の操作を使用し、複数回のループごとに1回の操作を実行します.特に、複数の正規マッチングを行う場合、できるだけ正規表現をマージする場合は、できるだけ正規表現をマージし、1回の遍歴でできるだけ対応するマッチングを見つけます.
ループ
var objs = [obj1, obj2, obj3],
i = 0;
len = objs.length;
for(i = 0; i < len; i++){
dosth(obj);
}
// object , :
while(obj = objs[i++]){
dosth(obj);
}
switch
// switch
function funa(){}
function funb(){}
function func(){}
switch(con){
case 'a':
funa();
break;
case 'b':
funb();
break;
case 'c':
func();
break;
}
//
function funa(){}
function funb(){}
function func(){}
var funs = {
'a':funa,
'b':funb,
'c':func
};
funcs[con]{};
// :
4.条件分岐
条件を分岐し,可能性順に高から低に配列する:解釈器の条件に対する貪欲な回数を減らすことができる.
同じ条件>2ブランチの場合、switchの使用はif:switchブランチの選択よりも効率が高く、IEでは特に顕著である.4本のブランチのテスト、IEの下でswitchの実行時間は約ifの半分です.
三目演算代替条件分岐
<span style="white-space:pre"> </span>if(a > b){
num = a;
}else{
num = b;
}
//
num = a > b ? a : b;
5.タイマー
継続的に実行されるコードの場合、settimeoutではなくsetIntervalを使用する必要があります.settimeoutは毎回タイマを初期化しますが、setIntervalは開始時にタイマを初期化するだけです.
<span style="white-space:pre"> </span>var timeoutTimes = 0;
function timeout(){
timeoutTimes++;
if(timeoutTimes < 10){
setTimeout(timeout, 10);
}
}
timeout();
//
var intervalTimes = 0;
function interval(){
intervalTimes++;
if(intervalTimes >= 10){
clearInterval(interv);
}
}
var interv = setInterval(interval, 10);
6.オブジェクトを作成する別の方法——Newを適用しない
// object , ,
function jason(){
this.propa = '';
this.propb = [];
this.propc = 0;
}
var objs = [],
i = 0,
obj;
while(i<100){
obj = new jason();
obj.propc = i;
objs.push(obj);
}
//
unction jason(){
this.propa = '';
this.propb = [];
this.propc = 0;
}
var objs = [],
i = 0,
obj;
while(i<100){
obj = jason();
obj.propc = i;
objs.push(obj);
}
}
7.タグとして使用される変数は、可能な限りブールタイプを使用します.
直接trueとfalseでマークし、数字や文字列の1と0でマークしないでください.