快捷導(dǎo)航

編寫(xiě)高性能Javascript代碼的N條建議

更新時(shí)間：2015年10月12日 14:48:25 作者：JackWang-CUMT

JavaScript代碼在web應(yīng)用程序中經(jīng)常用到，但是很多開(kāi)發(fā)者忽視了一些性能方面的知識(shí)，如何編寫(xiě)高性能javascript代碼呢？接下來(lái)，小編跟大家一起學(xué)習(xí)

多年來(lái)，Javascript一直在web應(yīng)用開(kāi)發(fā)中占據(jù)重要的地位，但是很多開(kāi)發(fā)者往往忽視一些性能方面的知識(shí)，特別是隨著計(jì)算機(jī)硬件的不斷升級(jí)，開(kāi)發(fā)者越發(fā)覺(jué)得Javascript性能優(yōu)化的好不好對(duì)網(wǎng)頁(yè)的執(zhí)行效率影響不明顯。但在某些情況下，不優(yōu)化的Javascript代碼必然會(huì)影響用戶的體驗(yàn)。因此，即使在當(dāng)前硬件性能已經(jīng)大大提升的時(shí)代，在編寫(xiě)Javascript代碼時(shí)，若能遵循Javascript規(guī)范和注意一些性能方面的知識(shí)，對(duì)于提升代碼的可維護(hù)性和優(yōu)化性能將大有好處。

　　下面給出編寫(xiě)高性能的Javascript代碼的若干建議：

　　1、盡量不要用for-in 循環(huán)去訪問(wèn)數(shù)組，建議用 for 循環(huán)進(jìn)行循環(huán)：　

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、建議將對(duì)象進(jìn)行緩存處理，特別是DOM訪問(wèn)是比較消耗資源的：

 //c.length沒(méi)有緩存，每次迭代都要計(jì)算一下數(shù)組的長(zhǎng)度
  function foo() {
   var i, b, c=[,,];
   for (i=;i<c.length;i++) {
    b = c[i];
    if(b === "")
     return b;
   }
  }
  //性能更好，第一次將數(shù)組的長(zhǎng)度緩存到變量l中，第二次及后續(xù)的循環(huán)無(wú)需計(jì)算數(shù)組長(zhǎng)度
  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')沒(méi)有緩存，每次都要遍歷DOM
  function foo() {
   var e;
   document.getElementById('info').innerHTML="call ";
   document.getElementById('info').innerHTML="call ";
   
  }
  //性能更好，第二次無(wú)需訪問(wèn)DOM
  function foo() {
  var e=document.getElementById('info');
  e.innerHTML="call ";
   e.innerHTML="call ";
  }

　　3、建議不要在函數(shù)內(nèi)進(jìn)行過(guò)深的嵌套判斷：

//函數(shù)內(nèi)嵌套判斷語(yǔ)句過(guò)多
  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、避免循環(huán)引用，防止內(nèi)存泄漏：

//需要jQuery
 function foo(e,d) {
  $(e).on("click", function() {
    //對(duì)d進(jìn)行邏輯處理
    cbk(d);
      } 
  });
 }
 //打破循環(huán)!
 function foo(e, d) {
  $(e).on("click", cbk(d));
 }
 function cbk (d) {
 //邏輯處理
 }

　　5、建議避免在函數(shù)內(nèi)返回一個(gè)未聲明的變量，會(huì)污染外部變量：

 function foo(a, b) {
  r = a + b;
  return r; //r未聲明，則創(chuàng)建了一個(gè)全局變量
 }

　　6、var聲明變量，建議寫(xiě)在多行

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

說(shuō)明：其實(shí)單個(gè)函數(shù)時(shí)間上差別較小，這里采用循環(huán)多次用累計(jì)時(shí)間進(jìn)行性能對(duì)比，不同PC配置或者瀏覽器測(cè)試結(jié)果可能存在差異。

以上內(nèi)容是編寫(xiě)高性能Javascript代碼的N條建議，希望對(duì)大家有所幫助。

您可能感興趣的文章: