欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

編寫高性能Javascript代碼的N條建議

 更新時間:2015年10月12日 14:48:25   作者:JackWang-CUMT  
JavaScript代碼在web應(yīng)用程序中經(jīng)常用到,但是很多開發(fā)者忽視了一些性能方面的知識,如何編寫高性能javascript代碼呢?接下來,小編跟大家一起學(xué)習(xí)

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

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

  1、盡量不要用for-in 循環(huán)去訪問數(shù)組,建議用 for 循環(huá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、建議將對象進行緩存處理,特別是DOM訪問是比較消耗資源的:

 //c.length沒有緩存,每次迭代都要計算一下數(shù)組的長度
  function foo() {
   var i, b, c=[,,];
   for (i=;i<c.length;i++) {
    b = c[i];
    if(b === "")
     return b;
   }
  }
  //性能更好,第一次將數(shù)組的長度緩存到變量l中,第二次及后續(xù)的循環(huán)無需計算數(shù)組長度
  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、建議不要在函數(shù)內(nèi)進行過深的嵌套判斷: 

//函數(shù)內(nèi)嵌套判斷語句過多
  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() {
    //對d進行邏輯處理
    cbk(d);
      } 
  });
 }
 //打破循環(huán)!
 function foo(e, d) {
  $(e).on("click", cbk(d));
 }
 function cbk (d) {
 //邏輯處理
 }  

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

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

  6、var聲明變量,建議寫在多行

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

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

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

相關(guān)文章

最新評論