javascript效能優化技巧介紹

提升javascript程式碼效能的技巧有很多，這裡分享的是比較簡單的幾種。

感興趣的朋友可以做一下參考，下面進入正題。

一.迴圈語句，如果是遍歷的陣列類似的資料結構，最好事先計算出長度:

[JavaScript] 純文字檢視 複製程式碼
var arr=["螞蟻部落",4,"青島市南區","www.softwhy.com"];
for(var index = 0;len = arr.length,index<len;index++){
  console.log(arr[index]);
}

如果是index<arr.length的話，每迴圈一次，都要計算一次長度。

二.用函式宣告替代函式表示式:

函式宣告被命名，因此它們更容易在呼叫堆疊中識別。

[JavaScript] 純文字檢視 複製程式碼
//不推薦
var foo = function () {
  //code
};
//推薦
function foo() {
  //code
}

三.方法採用預設引數:

ES5中沒有預設引數這個概念，ES6新增此語法。

具體可以參閱ES2015 函式新增特性一章節。

四.減少DOM操作:

dom操作是非常耗費效能的，所以要儘量減少。

[JavaScript] 純文字檢視 複製程式碼
//不推薦使用
function setSidebar() {
  $('.sidebar').hide();
  $('.sidebar').css({
    'background-color': 'pink'
  });
}
//推薦使用
function setSidebar() {
  var $sidebar = $('.sidebar');
  $sidebar.hide();
  $sidebar.css({
    'background-color': 'pink'
  });
}

實現把用到的元素查詢並儲存起來，而不是每一次使用都要查詢。

五.使用陣列加入代替字串連線:

[JavaScript] 純文字檢視 複製程式碼
// 不推薦方式
function inbox(messages) {
  items = '<ul>';
  for (i = 0; i < length; i++) {
    items += '<li>' + messages[i].message + '</li>';
  }
  return items + '</ul>';
}
// 推薦方式
function inbox(messages) {
  items = [];
  for (i = 0; i < length; i++) {
    items[i] = '<li>' + messages[i].message + '</li>';
  }
  return '<ul>' + items.join('') + '</ul>';
}