js性能最適化小結

17910 ワード

パフォーマンス最適化

グローバル検索を避ける
ブラウザがローカル変数にアクセスする速度は、グローバル変数にアクセスする速度よりも速く、変数は、スコープ内の階層を検索するのに時間がかかります.

 1   //    
 2   function fn(){
 3     document.getElementById('id1');
 4     document.getElementById('id2');
 5   }
 6 
 7   //   
 8   function fn(){
 9     var doc = document;
10     doc.getElementById('id1');
11     doc.getElementById('id2');
12   }
13   //   
14   !function fn(doc){
15     doc.getElementById('id1');
16     doc.getElementById('id2');
17   }(document);

エヴァ似の問題
jsのeval、setTimeout、set Interval、new Function()の動作はすべて文字列をjsコードとして実行することができます.この過程でコードの実行効率は非常に低く、使用を避けるべきです.匿名関数または伝達関数の参照を推奨します.

 1   //      eval
 2 
 3   // setTimeout、setInterval、new Function               
 4   setTimeout('alert(1)', 1000); //    
 5   setInterval('alert(1)', 1000); //    
 6   var oFn = new Function('alert(1)'); //    
 7 
 8   //   
 9   setTimeout(function(){
10     alert(1);
11   }, 1000);
12   setTimeout(fn, 1000);
13 
14   setInterval(function(){
15     alert(1);
16   }, 1000);
17   //setInterval(fn, 1000);
18 
19   var oFn = new Function(function(){
20     alert(1);
21   });
22   var oFn = new Function(fn);
23 
24   function fn(){
25     alert(1);
26   }

タイマー
コードを一定間隔で実行する場合、setIntervalを使用して、setTimeoutを通じて実現しないでください.一つのタイマーをオンにすると初期化されますので、setTimeoutを採用することは、常にタイマーを初期化することによって実現されます.

 1   var i = 0,
 2     timer = null;
 3 
 4   //    
 5   function fnTimeout(){
 6     if(i < 10){
 7       setTimeout(fnTimeout, 1000); //      
 8     }
 9     console.log(i++);
10   }
11   fnTimeout();
12 
13   //   
14   function fnInterval(){
15     if(i >= 10){
16       clearInterval(timer);
17       timer = null;
18     }
19     console.log(i++);
20   }
21   setInterval(fnInterval, 1000); //

複数の文字列接続
複数の文字列を接続する必要がある場合は、+==を少なめに使用し、データのjolin方法を使用した方がいいです.

 1   var a = 'a',
 2     b = 'b',
 3     c = 'c',
 4     s = '',
 5     arr = [];
 6 
 7   //    
 8   s += a;
 9   s += b;
10   s += c;
11 
12   //   
13   s = a + b + c;
14 
15   //   
16   arr.push(a);
17   arr.push(b);
18   arr.push(c);
19   s = arr.join('');

タイプ変換
数字を文字列に変換するには、「」＋数値を使います.
文字列の回転数:1*文字列;
任意の内部変換ブール:!変数;
変数宣言は単一varを使用します.
変数宣言はすべて単一var形式を採用しており、コードの実行時間を減らすことができます.変数宣言は比較的統一されています.

 1   //    
 2   var a = 'a';
 3   var b = 'b';
 4   var c = 'c';
 5   var s = '';
 6   var arr = [];
 7 
 8   //   
 9   var a = 'a',
10     b = 'b',
11     c = 'c',
12     s = '',
13     arr = [];

自己増加自滅式を表式に入れる

1   //    
2   var i = 0,
3     b = i;
4   i++;
5 
6   //   
7   var i = 0,
8     b = i++;

オブジェクトと配列の字面量を使う

1   //    
2   var arr = new Array,
3     obj = new Object,
4     re = new RegExp('a');
5   
6   //   
7   var arr = [],
8     obj = {},
9     re = /a/;

クローズド中で使用しない変数のリリース
クローズド中の変数が他の関数で使用されると、この変数はずっとメモリに残ります.また、DOMの参照は大きなメモリを消耗しますので、クローズド中のもう参照しない変数を即時にリリースするべきです.

 1   //    
 2   var fn = !function(doc){
 3     var obj = {name: 'hum'},
 4       arr = [1, 2],
 5       oDom = doc.getElementById('id');
 6 
 7     // ......
 8 
 9     return function(){
10       console.log(obj.name);
11     }
12   }(document);
13 
14   //   
15   var fn = !function(doc){
16     var obj = {name: 'hum'},
17       arr = [1, 2],
18       oDom = doc.getElementById('id');
19 
20     // ......
21 
22     arr = doc = oDom = null; //   
23 
24     return function(){
25       console.log(obj.name);
26     }
27   }(document);

reflowを減らす
css仕様にはレンダリング対象の概念があります.通常は箱で表します.mozelaはframeというオブジェクトを通して箱を操作します.
reflow:DOMツリーを読み込み、frame構造の応答を作成または更新するプロセス.reflowを減らす方法:
1、要素を削除し、変更が完了したら元に戻す
2、元素displayをnoneに等しくし、修正したら元に戻す.
3、複数のスタイルを変更する場合は、このスタイルの代わりにクラスで操作します.
4、大量の要素を追加してページにdocumentFragmentを使用する
イベント依頼
サブ要素のイベントは、親要素またはより高い要素に登録され、各サブノードにイベントの傍受を登録する必要はない.
DOM削除
DOMノードを削除する時、必ずDOM上のバインディングされたイベントを削除します.でないと、回収できなくなり、メモリを占有します.
DOM集合のアクセスを減らす
集合をjsで取得する場合:
1、getElements ByTagName
2、childNodes
3、atributes
4、document.forms document.imags
…
否定操作の短縮
できるだけ論理的な非を使用して条件判断を行い、nullまたはfalseに等しい使用を減らす.

AnglarJS directive改ページ、続きは…