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>';
}

javascript性能优化技巧介绍,这样的场景在实际项目中还是用的比较多的,关于javascript性能优化技巧介绍就介绍到这了。

javascript性能优化技巧介绍属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容