JavaScriptのパフォーマンス最適化に関する小さな知識

文字列接続
複数の文字列を接続する場合は、+=を使用しないでください.

s+=a
s+=b
s+=c

書くべきだ

s+=a+b+c

数値を文字列に変換"" +で数字を文字列に変換したほうがいいです.醜いように見えますが、実際にはこの効率が最も高く、性能的には最高です.

("" +) > String() > .toString() > new String() 

浮動小数点数を整数に変換parseInt()を使用できますが、parseInt()は浮動小数点数と整数型の間の変換ではなく文字列を数値に変換するために使用されます.Math.floor()またはMath.round()を使用する必要があります.
サイクルの最適化
ループ処理のたびに終了条件が計算されるため、属性検索や他の操作を避けるためには、ループ制御量をローカル変数に保存することが望ましい.すなわち、配列またはリストオブジェクトの遍歴に対してlengthをローカル変数に保存し、ループの各ステップで値を繰り返すことを避けることが望ましい.

 let list = document.getElementsByTagName('p'); 
 for (var i = 0; i < list.length; i++) { 
  //…… 
 } 

と書くことができます.

 let list = document.getElementsByTagName('p'); 
 for (var i = 0, l = list.length; i < l; i++) { 
  //…… 
}

JavaScriptでは、for(;;;)、while()、for(in)の3つのループを使用できます.実際には、この3つのループのうちfor(in)の効率は非常に悪いです.ハッシュキーを検索する必要があるので、できれば、できるだけ少なく使うべきです.for(;;;)およびwhileサイクル、whileサイクルの効率はfor(;;;)よりも優れており、for(;;;)構造の問題のため、頻繁にジャンプバックする必要がある可能性がある.

let arr = [1, 2, 3, 4, 5, 6, 7];  
let sum = 0;  
for (var i = 0, l = arr.length; i < l; i++) {  
 sum += arr[i];  
} 
//    
let arr = [1, 2, 3, 4, 5, 6, 7];  
let sum = 0, l = arr.length;  
while (l--) { 
  sum += arr[l];  
} 

最も一般的なforサイクルとwhileサイクルはいずれも前テストサイクルであり、do-whileのような後テストサイクルは、最初の終了条件の計算を回避することができ、そのため、より速く実行される.
じょうけんぶんき
条件を分岐し、可能性順に高い順から低い順に並べると、解釈器による条件の検出回数を減らすことができ、同じ条件子の多(>2)条件分岐の場合、switchを用いることがif:switch分岐よりも優れている分岐選択の効率はifよりも高く、IEでは特に顕著である.4分岐のテストでは、IEでのswitchの実行時間はifの約半分である.条件分岐の代わりに三目演算子を用いる.

if (a > b) {  
 num = a;  
} else {  
 num = b;  
}
//    
num = a > b ? a : b; 

nullとの比較を避ける
JavaScriptは弱いタイプなので、自動タイプチェックは一切しませんのでnullと比較するコードを見たら、以下の技術を試してみましょう

値が参照タイプである場合、instanceofオペレータを使用してそのコンストラクタ

を確認します.

値が1つの基本タイプであるべきである場合、作用typeofはそのタイプ

を検査する.

オブジェクトに特定のメソッド名を含めることを望む場合、typeofオペレータを使用して、指定された名前のメソッドがオブジェクト上に存在することを保証する

.
DOMアクセスを最小限に抑えるJavaScriptを使用してDOM要素にアクセスするのは簡単で、コードは読みやすいが、速度が遅い.次に、JavaScriptを使用してWebレイアウトを修飾することを制限し、アクセス要素に対する参照をキャッシュします.
グローバル検索の回避
1つの関数では、グローバル変数へのアクセス速度がグローバル変数へのアクセス速度よりも速いため、グローバル変数として格納されるグローバル変数が使用されます.

function search() {      
 //                     
 console(window.location.href + window.location.host)    
}      
//                             
function search() {      
 let location = window.location
 console(location.href + location.host);
} 

繰り返し使用した呼び出し結果をローカル変数に保存

//             
let h1 = element1.clientHeight + num1;  
let h4 = element1.clientHeight + num2; 
   
let eleHeight = element1.clientHeight;  
let h1 = eleHeight + num1; 
let h4 = eleHeight + num2;