高性能JavaScript循环语句和条件语句


Posted in Javascript onJanuary 20, 2016

一、循环语句
众所周知,常用的循环语句有for、while、do-while以及for-in,forEach。除了for-in和forEach性能略低外,平时我们对前三者的选择更多的是基于需求而非性能考虑,今天我们就对它们各自的性能做个测试,告诉我们最极端的情况下还能做哪些优化。

首先我们来谈谈为何for-in和forEach会比其他的慢。for-in一般是用在对象属性名的遍历上的,由于每次迭代操作会同时搜索实例本身的属性以及原型链上的属性,所以效率肯定低下;而forEach是基于函数的迭代(需要特别注意的是所有版本的ie都不支持,如果需要可以用JQuery等库),对每个数组项调用外部方法所带来的开销是速度慢的主要原因。

接着我们看看每次迭代中for、while以及do-while都做了什么。

var length = items.length;
for(var i = 0; i < length; i++)
 process(items[i]);

var j = 0;
while(j < length) 
 process(items[j++]);

var k = 0;
do {
 process(items[k++]);
} while(k < length);

上面的每个循环中,每次运行循环体时都会产生这样的操作:

  • 一次控制条件中的数值大小比较(i < length)
  • 一次控制条件结果是否为true的比较(i < length === true)
  • 一次自增操作(i++)
  • 一次数组查找(items[i])
  • 一次函数调用process(items[i])

我们可以通过颠倒数组的顺序来提高循环性能:

for(var i = items.length; i--; )
 process(items[i]);

var j = items.length;
while(j--) 
 process(items[j]);

var k = items.length - 1;
do {
 process(items[k]);
} while(k--);

本例中使用了倒序循环,并把减法操作整合在循环条件中。现在每个控制条件只是简单地与0比较。控制条件与true值比较,任何非零数会自动转换为true,而零值等同于false。实际上,控制条件从两个比较(迭代数少于总数吗?它是true吗?)减少到一次比较(它是true吗?)。每次迭代从两次比较减少到一次,进一步提高了循环速度。

性能测试:

那么事实真的如此吗?真金不怕浏览器验。测试代码很简单,针对不同的8种情况封装了8个函数(不加定时器firefox下无法打印profiles信息,原因不明):

// init array
var a = [];
var length = 10;
for(var i = 0; i < length; i++)
 a[i] = 1;

function for_in() {
 var sum = 0;
 for(var i in a) 
  sum += a[i];
}

function for_each() {
 var sum = 0;
 a.forEach(function(value, index, array) {
  sum += value;
 });
}

function for_normal() {
 var sum = 0;
 for(var i = 0; i < length; i++)
  sum += a[i];
}

function for_reverse() {
 var sum = 0;
 for(var i = length; i--; )
  sum += a[i];
}

function while_normal() {
 var sum = 0;
 var i = 0;
 while(i < length) 
  sum += a[i++];
}

function while_reverse() {
 var sum = 0;
 var i = length;
 while(i--) 
  sum += a[i];
}

function do_while_normal() {
 var sum = 0;
 var i = 0;
 do {
  sum += a[i++];
 } while(i < length);
}

function do_while_reverse() {
 var sum = 0;
 var i = length - 1;
 do {
  sum += a[i];
 } while(i--);
}

setTimeout(function() {
 console.profile();
 for_in();
 for_each();
 for_normal();
 for_reverse();
 while_normal();
 while_reverse();
 do_while_normal();
 do_while_reverse();
 console.profileEnd();
}, 1000);

当数组长度为100时,我们发现firefox下的结果确实和预料的相似:for-each和for-in效率低下,倒序比正序效率略微提升。(chrome下的profiles由于时间太短不显示)

当数据量达到100w时,firefox和chrome下的结果都如人所愿,但是也略微有所不同。ff下的for-in表现地比for-each好,而chrome下for-in表现糟糕,直接提出了警告。而倒序迭代虽然性能略微有所提升,但是提升的不是很多,且降低了代码阅读性。

高性能JavaScript循环语句和条件语句

高性能JavaScript循环语句和条件语句

小结:

  • 倒序迭代确实能略微提升代码性能,但是牺牲了代码可读性,除非追求极端性能优化情况下不然没必要用
  • 遍历数组能用普通的循环就不要用for-in和for-each

二、条件语句
常见的条件语句有if-else和switch-case,那么什么时候用if-else,什么时候用switch-case语句呢?

我们先来看个简单的if-else语句的代码:

if (value == 0){
  return result0;
} else if (value == 1){
  return result1;
} else if (value == 2){
  return result2;
} else if (value == 3){
  return result3;
} else if (value == 4){
  return result4;
} else if (value == 5){
  return result5;
} else if (value == 6){
  return result6;
} else if (value == 7){
  return result7;
} else if (value == 8){
  return result8;
} else if (value == 9){
  return result9;
} else {
  return result10;
}

最坏的情况下(value=10)我们可能要做10次判断才能返回正确的结果,那么我们怎么优化这段代码呢?一个显而易见的优化策略是将最可能的取值提前判断,比如value最可能等于5或者10,那么将这两条判断提前。但是通常情况下我们并不知道(最可能的选择),这时我们可以采取二叉树查找策略进行性能优化。

if (value < 6){
  if (value < 3){
    if (value == 0){
      return result0;
    } else if (value == 1){
      return result1;
    } else {
      return result2;
    }
  } else {
    if (value == 3){
      return result3;
    } else if (value == 4){
      return result4;
    } else {
      return result5;
    }
  }
} else {
  if (value < 8){
    if (value == 6){
      return result6;
    } else {
      return result7;
    }
  } else {
    if (value == 8){
      return result8;
    } else if (value == 9){
      return result9;
    } else {
      return result10;
    }
  }
}

这样优化后我们最多进行4次判断即可,大大提高了代码的性能。这样的优化思想有点类似二分查找,和二分查找相似的是,只有value值是连续的数字时才能进行这样的优化。但是代码这样写的话不利于维护,如果要增加一个条件,或者多个条件,就要重写很多代码,这时switch-case语句就有了用武之地。

将以上代码用switch-case语句重写:

switch(value){
  case 0:
    return result0;
  case 1:
    return result1;
  case 2:
    return result2;
  case 3:
    return result3;
  case 4:
    return result4;
  case 5:
    return result5;
  case 6:
    return result6;
  case 7:
    return result7;
  case 8:
    return result8;
  case 9:
    return result9;
  default:
    return result10;
}

swtich-case语句让代码显得可读性更强,而且swtich-case语句还有一个好处是如果多个value值返回同一个结果,就不用重写return那部分的代码。一般来说,当case数达到一定数量时,swtich-case语句的效率是比if-else高的,因为switch-case采用了branch table(分支表)索引来进行优化,当然各浏览器的优化程度也不一样。

除了if-else和swtich-case外,我们还可以采用查找表。

var results = [result0, result1, result2, result3, result4, result5, result6, result7, result8, result9, result10];

//return the correct result
return results[value];

当数据量很大的时候,查找表的效率通常要比if-else语句和swtich-case语句高,查找表能用数字和字符串作为索引,而如果是字符串的情况下,最好用对象来代替数组。当然查找表的使用是有局限性的,每个case对应的结果只能是一个取值而不能是一系列的操作。

小结:

  • 当只有两个case或者case的value取值是一段连续的数字的时候,我们可以选择if-else语句
  • 当有3~10个case数并且case的value取值非线性的时候,我们可以选择switch-case语句
  • 当case数达到10个以上并且每次的结果只是一个取值而不是额外的JavaScript语句的时候,我们可以选择查找表

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
video.js使用改变ui过程
Mar 05 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
详解Javascript模板引擎mustache.js
Jan 20 #Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 #Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 #Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 #Javascript
js实现图片无缝滚动特效
Mar 19 #Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 #Javascript
学习JavaScript设计模式之观察者模式
Apr 22 #Javascript
You might like
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
php自定义分页类完整实例
2015/12/25 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
以一段代码为实例快速入门Python2.7
2015/03/31 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
详解Python if-elif-else知识点
2018/06/11 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
python微信好友数据分析详解
2018/11/19 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
python 命令行传入参数实现解析
2019/08/30 Python
python psutil监控进程实例
2019/12/17 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
学python需要去培训机构吗
2020/07/01 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
影视动画专业个人的自我评价
2013/12/31 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书