常見的前端性能優化手段

來自專欄 零基礎學前端

前端主要指html、css、javascript三種技術，這三種技術，都有一些優化手段。

html和css部分有很多優化手段，比如用div代替table、慎用iframe、css精靈圖等，就不多說了，咱們主要說說javascript部分的優化手段。

javascript部分

案例一：

代碼1：

var arr = [「a」, 「b」, 「c」];

for( var i=0; i<arr.length; i++ ){

console.log( arr[i] );

}

上面的代碼確實沒有問題，能夠對數組進行循環，但是，i<arr.length 這個寫法將導致性能下降，因為每一次判斷時，都需要獲取arr的length屬性，解決的辦法是，提前用變數保存length屬性，判斷時僅判斷變數即可。

代碼2：

var arr = [「a」, 「b」, 「c」];

var len = arr.length;

for( var i=0; i<len; i++ ){

console.log( arr[i] );

}

上面的代碼就比第一次的代碼性能好很多了，但是它還有優化的空間，那就是var聲明變數部分，上面的代碼用了3個var，這3個var如果合併成1個，那麼性能會更好。

代碼3：

var arr = [「a」, 「b」, 「c」], i=0, len=arr.length;

for( ; i<len; i++ ){

console.log( arr[i] );

}

總結：

1， 對於反覆需要獲取某一個屬性時，我們提前用一個變數接收，比如len=arr.length；

2， 能夠合併的代碼，可以做合併操作，比如 var 聲明多個變數；

取平衡點

代碼4：

var arr = ["a", "b", "c"], i=-1, len=arr.length-1;

for( ; i++<len; ){

console.log( arr[i] );

}

代碼4從性能的角度講，會比代碼3更優；但從語義的角度講，代碼3比代碼4優。

選擇哪種，需要看具體需求，如果僅僅是這種3次的循環，那就無所謂了，性能都差不多。

案例二：

代碼1：

var a=1, b=2, fn=function(){

alert( a+b );

};

上面的代碼中，執行fn函數時，會輸出a+b的值，如果沒有其他程序需要用到a和b，那麼變數a和b就不應該寫在全局下，而應該寫在函數內，寫在全局下，頁面關閉才會銷毀，而寫在函數內，函數執行完畢，就會銷毀，所以從內存使用的角度，我們可以為此做優化。

代碼2：

var fn = function(){

var a=1, b=2;

alert( a+b );

}

如果fn函數僅需要執行1次，之後就再也沒有使用場景了，我們可以使用下面的自調用函數。

代碼3：

(function(){

var a=1, b=2;

alert(a+b);

})()

總結：盡量減少全局變數，變數用完記得要銷毀。

上圖為我推薦給大家的一本說，裡面寫的內容比較詳細。

javascript中可以優化的地方特別多，時間關係，就先講到這裡。