High-performance JavaScript loop statements and conditional statements

1. Loop statement
As we all know, commonly used loop statements include for, while, do-while, for-in, and forEach. Except that the performance of for-in and forEach is slightly lower, our choice of the first three is usually based more on needs rather than performance considerations. Today we will test their respective performances and tell us that they can still perform in the most extreme cases. What optimizations can be done.

First, let’s talk about why for-in and forEach are slower than others. for-in is generally used to traverse object attribute names. Since each iteration operation searches for the attributes of the instance itself and the attributes on the prototype chain at the same time, the efficiency is definitely low; while forEach is a function-based iteration (special attention is required) However, all versions of IE do not support it. If necessary, you can use libraries such as JQuery). The overhead caused by calling external methods for each array item is the main reason for the slow speed.

Then let’s take a look at what for, while and do-while do in each iteration.

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);

Copy after login

In each loop above, this operation will occur every time the loop body is run:

Numerical size comparison in a control condition (i < length)
A comparison that controls whether the condition result is true (i < length === true)
One auto-increment operation (i++)
One array search (items[i])
One function call process(items[i])

We can improve loop performance by reversing the order of the array:

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--);

Copy after login

In this example, a reverse order loop is used and the subtraction operation is integrated into the loop condition. Now each control condition is simply compared to 0. The control condition is compared to a true value. Any non-zero number is automatically converted to true, while a zero value is equivalent to false. In effect, the control condition is reduced from two comparisons (Is the number of iterations less than the total? Is it true?) to one comparison (Is it true?). This is reduced from two comparisons to one per iteration, further improving loop speed.

Performance test:

So is this really the case? Real money is not afraid of browser verification. The test code is very simple, encapsulating 8 functions for 8 different situations (profiles information cannot be printed in Firefox without a timer, the reason is unknown):

// 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);

Copy after login

When the array length is 100, we found that the results under firefox are indeed similar to expectations: for-each and for-in are inefficient, and reverse order is slightly more efficient than forward order. (Profiles under chrome are not displayed because the time is too short)

When the data volume reaches 1 million, the results under firefox and chrome are as expected, but they are slightly different. The performance of for-in under ff is better than that of for-each, but the performance of for-in under chrome is poor, and a warning is directly issued. Although the performance of reverse iteration is slightly improved, the improvement is not much and the readability of the code is reduced.

Summary:

Reverse iteration can indeed slightly improve code performance, but it sacrifices code readability. Unless extreme performance optimization is pursued, there is no need to use
If you can traverse the array using a normal loop, don’t use for-in and for-each

2. Conditional statements
Common conditional statements include if-else and switch-case. So when to use if-else and when to use switch-case statement?

Let’s first look at the code of a simple if-else statement:

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

Copy after login

In the worst case (value=10) we may have to make 10 judgments before returning the correct result. So how do we optimize this code? An obvious optimization strategy is to judge the most likely value in advance. For example, the value is most likely to be equal to 5 or 10, then make these two judgments in advance. But usually we don't know (the most likely choice). In this case, we can adopt a binary tree search strategy for performance optimization.

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

Copy after login

这样优化后我们最多进行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;
}

Copy after login

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];

Copy after login

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

小结：