Performance issues with JavaScript loop statements

In most programming languages, loop statements consume most of the time
And loop statements are a very important programming pattern

In our JavaScript, there are four types of loops

1. for loop

2. while loop

3. do-while loop

4. for-in loop

The first three loops are also very common in other languages
The for-in loop may be new to students who have studied C/C++ in school
It will Search instance and prototype properties, so it incurs more overhead per iteration
The for-in loop ends up being only 1/7 as fast as the other three types
So, unless we explicitly need to iterate over an unknown number of properties object, otherwise we should try to avoid using for-in
Don’t use for-in loops to traverse arrays

We can iterate a clear object like this

var props = ['prop1', 'prop2'],      i = 0;while(i < props.length){
    fn(obj[props[i++]]);
}

This code creates an array of object properties based on the properties in the object, and then uses a while loop to traverse the property list and process the corresponding property values ​​
This eliminates the need to search for each property of the object, reducing the number of loops Overhead

The premise of the above approach is that the properties inside the object are known
If we don’t know the internal implementation of the object
We still have to deal with the properties of the object itself, we can only do this

for(var prop in obj){    if(obj.hasOwnProperty(prop)){
        //...
    }
}

The cost is that each iteration has to determine whether the property is the object's own property rather than an inherited property

Except for-in, the performance of other loops is similar, so you should go to Consider the needs and choose the loop type

---

I believe that friends who have just learned programming are all familiar with writing loops

for(var i = 0; i < arr.length; i++){
    fn(arr[i]);
}

Every time this loop statement iterates, it must search arr length attribute, this is very time-consuming
So we can optimize,

for(var i = 0, len = arr.length; i < len; i++){
    fn(arr[i]);
}

Cache the array length value to a local variable, so the problem is solved
The same goes for while, do-while
Depending on the array length, this can save about 25% of running time in many browsers

---

We can also slightly improve 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--);

Do this every time The iteration control condition is reduced from two judgments (whether the number of iterations is less than the total number, whether it is true) to one judgment (whether it is true), which further improves the loop speed

---

A few final words

We all may have used some array methods such as arr.forEach() or some framework iteration methods such as jQuery's $().each() to traverse the array.
These methods execute an Functions
Although they are convenient, they are much slower than ordinary loops (calling external methods)
In all cases, loop-based iteration is about 8 times faster than function-based iteration
Therefore, when we can use ordinary loops (for, while, do-while) to solve problems, we try to use these ordinary loops

The above is the content of the performance issues of JavaScript loop statements. For more related content, please pay attention to PHP Chinese Net (www.php.cn)!