javascript性能优化技巧介绍

提升javascript代码性能的技巧有很多，这里分享的是比较简单的几种。

感兴趣的朋友可以做一下参考，下面进入正题。

一.循环语句，如果是遍历的数组类似的数据结构，最好事先计算出长度:

var arr=["前端教程网",4,"青岛市南区","www.pipipi.net"];
for(var index = 0;len = arr.length,index<len;index++){
  console.log(arr[index]);
}

如果是index<arr.length的话，每循环一次，都要计算一次长度。

二.用函数声明替代函数表达式:

函数声明被命名，因此它们更容易在调用堆栈中识别。

//不推荐
var foo = function () {
  //code
};
//推荐
function foo() {
  //code
}

三.方法采用默认参数:

ES5中没有默认参数这个概念，ES6新增此语法。

具体可以参阅ES2015 函数新增特性一章节。

四.减少DOM操作:

dom操作是非常耗费性能的，所以要尽量减少。

//不推荐使用
function setSidebar() {
  $('.sidebar').hide();
  $('.sidebar').css({
    'background-color': 'pink'
  });
}
//推荐使用
function setSidebar() {
  var $sidebar = $('.sidebar');
  $sidebar.hide();
  $sidebar.css({
    'background-color': 'pink'
  });
}

实现把用到的元素查找并存储起来，而不是每一次使用都要查找。

五.使用数组加入代替字符串连接:

// 不推荐方式
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>';
}