作者：JackWang-CUMT
原文地址：
http://www.cnblogs.com/isaboy/p/high_performance_javascript.html

多年來，Javascript一直在web應用開發(fā)中占據(jù)重要的地位，但是很多開發(fā)者往往忽視一些性能方面的知識，特別是隨著計算機硬件的不斷升級，開發(fā)者越發(fā)覺得Javascript性能優(yōu)化的好不好對網頁的執(zhí)行效率影響不明顯。但在某些情況下，不優(yōu)化的Javascript代碼必然會影響用戶的體驗。因此，即使在當前硬件性能已經大大提升的時代，在編寫Javascript代碼時，若能遵循Javascript規(guī)范和注意一些性能方面的知識，對于提升代碼的可維護性和優(yōu)化性能將大有好處。
　　
下面給出編寫高性能的Javascript代碼的若干建議：
　　
1、盡量不要用for-in 循環(huán)去訪問數(shù)組，建議用 for 循環(huán)進行循環(huán)：

function foo1() {
        var i, b, c=[1,2,3];
        for (i in c) {
            b = c[i];
            if(b === "2")
                return b;
        }
    }
     //性能更好
    function foo2() {
        var i, b, c=[1,2,3];
        for (i=0;i<c.length;i++) {
            b = c[i];
            if(b === "2")
                return b;
        }

    }

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

//c.length沒有緩存，每次迭代都要計算一下數(shù)組的長度
    function foo1() {
        var i, b, c=[1,2,3];
        for (i=0;i<c.length;i++) {
            b = c[i];
            if(b === "2")
                return b;
        }
    }
     //性能更好，第一次將數(shù)組的長度緩存到變量l中，第二次及后續(xù)的循環(huán)無需計算數(shù)組長度
    function foo2() {
        var i, b, c=[1,2,3],l;
        for (i=0,l=c.length;i<l;i++) {
            b = c[i];
            if(b === "2")
                return b;
        }
    }

//document.getElementById('info')沒有緩存，每次都要遍歷DOM
    function foo1() {
        var e;
        document.getElementById('info').innerHTML="call 1";
        document.getElementById('info').innerHTML="call 2";
        
    }
     //性能更好，第二次無需訪問DOM
    function foo2() {
       var e=document.getElementById('info');
       e.innerHTML="call 1";
           e.innerHTML="call 2";
    }

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

//函數(shù)內嵌套判斷語句過多
     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)引用，防止內存泄漏：

//需要jQuery
function foo1(e,d) {
    $(e).on("click", function() {
           //對d進行邏輯處理
             cbk(d);
                    } 
      });
}

//打破循環(huán)!
function foo2(e, d) {
    $(e).on("click", cbk(d));
}
function cbk (d) {
 //邏輯處理
}

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

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

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

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

function foo2() {
    var c = 1,sum=0, d = 0, e;
}

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