In-depth understanding of loop optimization in Javascript_javascript skills

Loops are a basic function that most programming languages ​​have, and JS is no exception. The difference is that JS is an interpreted language and runs in a browser environment. The client's software and hardware conditions will have a great impact on the execution efficiency of JS. However, the client environment is unknown, diverse, and difficult to change for developers, so optimizing code quality is the main way to improve code efficiency.
In JS code, loops are a factor that can easily cause performance problems. Understanding the characteristics of loops and optimizing them in a targeted manner may lead to good performance improvements.
For, while, do-while loops:
The loop efficiency of these three loops is similar, so you only need to choose according to the appropriate application scenario.
Take the for loop as an example:

Copy the code The code is as follows:

var aValues ​​= ["a", "b", "c", "d"];
for(var i = 0; i < aValues.length; i = 1){
fDoSomethingA(aValues[i]) ;
fDoSomethingA(aValues[i]);
}

In the above example, each loop must compare the length of i and the array, so the array length must be re-read each time , since if the array length is constant during the loop, there is no need to do this, we can use local variables instead of reading length. Similarly, in the example, since aValues[i] has been read more than twice, we can also assign it to a local variable:

Copy code The code is as follows:

var aValues ​​= ["a", "b", "c", "d"], nLength = aValues.length;
for(var i = 0, sValue; i < nLength; i = 1){
sValue = aValues[i];
fDoSomethingA(sValue);
fDoSomethingB(sValue);
}

If the business logic of the loop is not sensitive to the loop order, you can try the reverse loop, that is, decrement the counter to 0.

Copy code The code is as follows:

var aValues ​​= ["a", "b", "c", "d"], nLength = aValues.length;
for(var i = nLength, sValue; i -= 1;){
sValue = aValues[i];
fDoSomethingA(sValue );
fDoSomethingB(sValue);
}

Using this method, the counter is compared with 0 by default, and even the local variable comparison is omitted, which can theoretically improve efficiency.
for-in loop:
The for-in loop is more like exhaustive. It is used to traverse object properties. We know that the search for object properties will continue to the top of the prototype chain, which will greatly reduce the loop efficiency. There is no room for optimization in the way for-in loops are written, and you need to follow certain principles when using them: try to use for-in loops only when traversing data objects.
If the properties of the object to be traversed are clear, an array loop can be used instead.
For example, traverse a contact object:

Copy code The code is as follows:

var aContact = ["N", "FN", "EMAIL;PREF", ...];
for(var i = aContact.length; i -= 1;){
fDoSomething(aContact[i]) ;
}

Duff strategy
The main principle of Duff strategy is to improve efficiency by reducing the number of times by unrolling the loop. For example
A normal loop:

Copy code The code is as follows:

for(var i = aValues.length; i -= 1){
fDoSomething(aValues[i]);
}

If aValues.length == N, the efficiency of writing it in the following way Will be higher than the loop:

Copy code The code is as follows:

fDoSomething(aValues[ 0]);
fDoSomething(aValues[1]);
fDoSomething(aValues[2]);
fDoSomething(aValues[3]);
...
...
fDoSomething(aValues[N-1]);

But if N is large, this writing method is unrealistic, and the Duff strategy is a moderate loop expansion strategy.
Recently, the Duff strategy has been added to the initialization cycle of NetEase mailbox contacts:

Copy code The code is as follows:

var nLength = aContacts.length,
//Total number of rounds
nRounds = Math.floor( nLength / 8),
// Extra margin
nLeft = nLength % 8,
i = 0;
// Process the remainder first
if(nLeft){
do{
fFormat(aContacts[i ]);
}while(-- nLeft)
}
//Perform formatting 8 times per round
if(nRounds){
do{
fFormat(aContacts[i ]);
fFormat(aContacts[i ]);
fFormat(aContacts[i ]);
fFormat(aContacts[i ]);
fFormat(aContacts[i ]);
fFormat(aContacts[i ]);
fFormat(aContacts[i ]);
fFormat(aContacts[i ]);
}while(-- nRounds)
}

As shown above, each round of loop can Performs formatting operations on 8 contact data, and a loop is used to process the remaining contacts. It can be seen that when there are many contacts, the total number of cycles is greatly reduced, which can reduce cycle consumption. In addition, 8 is the optimal value proposed by Duff strategy.
In actual testing, it was found that it can bring more than 10-20% performance improvement under IE, while there is almost no difference in non-IE browsers.
Conclusion: During the test, it was found that under non-IE browsers, the efficiency gap between after optimization and before optimization is not very big, or even negligible. This shows that the JS engines of these browsers are