編寫高效能Javascript代碼的N條建議，高效能javascript

編寫高效能Javascript代碼的N條建議，高效能javascript

多年來，Javascript一直在web應用開發中佔據重要的地位，但是很多開發人員往往忽視一些效能方面的知識，特別是隨著電腦硬體的不斷升級，開發人員越發覺得Javascript效能最佳化的好不好對網頁的執行效率影響不明顯。但在某些情況下，不最佳化的Javascript代碼必然會影響使用者的體驗。因此，即使在當前硬體效能已經大大提升的時代，在編寫Javascript代碼時，若能遵循Javascript規範和注意一些效能方面的知識，對於提升代碼的可維護性和最佳化效能將大有好處。

　　下面給出編寫高效能的Javascript代碼的若干建議：

　　1、盡量不要用for-in 迴圈去訪問數組，建議用 for 迴圈進行迴圈：　      

function foo() {   var i, b, c=[,,];   for (i in c) {    b = c[i];    if(b === "")     return b;   }  }  //效能更好  function foo() {   var i, b, c=[,,];   for (i=;i<c.length;i++) {    b = c[i];    if(b === "")     return b;   }  } 

　　2、建議將對象進行緩衝處理，特別是DOM訪問是比較消耗資源的：

 //c.length沒有緩衝，每次迭代都要計算一下數組的長度  function foo() {   var i, b, c=[,,];   for (i=;i<c.length;i++) {    b = c[i];    if(b === "")     return b;   }  }  //效能更好，第一次將數組的長度緩衝到變數l中，第二次及後續的迴圈無需計算數組長度  function foo() {   var i, b, c=[,,],l;   for (i=,l=c.length;i<l;i++) {    b = c[i];    if(b === "")     return b;   }  }  //document.getElementById('info')沒有緩衝，每次都要遍曆DOM  function foo() {   var e;   document.getElementById('info').innerHTML="call ";   document.getElementById('info').innerHTML="call ";     }  //效能更好，第二次無需訪問DOM  function foo() {  var e=document.getElementById('info');  e.innerHTML="call ";   e.innerHTML="call ";  }

　　3、建議不要在函數內進行過深的嵌套判斷： 

//函數內嵌套判斷語句過多  function foo1() {   var r={};   r.data={};   r.data.myProp=2;   if (r) {   if (r.data) {    if (r.data.myProp) {     //邏輯處理    }     else {     //邏輯處理    }   } } }  //效能更好 function foo2() {   var r={};   r.data={};   r.data.myProp=2;  if (!r) return;  if (!r.data) return;    if (r.data.myProp) {   //邏輯處理  } else {    //邏輯處理  } }

　　4、避免循環參考，防止記憶體流失：

//需要jQuery function foo(e,d) {  $(e).on("click", function() {    //對d進行邏輯處理    cbk(d);      }   }); } //打破迴圈! function foo(e, d) {  $(e).on("click", cbk(d)); } function cbk (d) { //邏輯處理 }  

　　5、建議避免在函數內返回一個未聲明的變數，會汙染外部變數：

 function foo(a, b) {  r = a + b;  return r; //r未聲明，則建立了一個全域變數 }

　　6、var聲明變數，建議寫在多行

 //自己測試結果是foo快，但也有一種觀點是foo快 function foo() {  var c = ;  var sum=;  var d = ;  var e; } function foo() {  var c = ,sum=, d = , e; }

說明：其實單個函數時間上差別較小，這裡採用迴圈多次用累計時間進行效能對比，不同PC配置或者瀏覽器測試結果可能存在差異。

以上內容是編寫高效能Javascript代碼的N條建議，希望對大家有所協助。