Deep understanding of cyclic optimization _javascript techniques in JavaScript

Source: Internet
Author: User
Cycle is the basic function of most programming languages, JS is no exception, the difference is that JS is an interpreted language, running in the browser environment, the client's hardware and software conditions will have a great impact on the efficiency of JS implementation. 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 relatively easy factor for performance problems. Understanding cyclic characteristics and then targeted optimization may lead to a good performance boost.
For, while, Do-while loops:
The cycle efficiency of these three cycles is not much different, so just choose according to the suitable application scene.
Take the For loop for example:
Copy Code code 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 example above, each loop compares the length of I to the array, so it is necessary to reread the length of the array each time, so that if the length of the array is invariant in the loop, we can use local variables instead of length reading. Similarly, in the case of avalues[i], because it is read more than two times, we can also assign it to a local variable:
Copy Code code 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 loop's business logic is not sensitive to the cyclic order, you can try the reverse loop to decrement the counter to 0.
Copy Code code 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);
}

In this way the counter defaults are compared to 0, and even the local variables are omitted, and in theory can improve efficiency.
For-in Cycle:
For-in loops are more like exhaustive, he 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 cycle efficiency. For-in cycle of the writing of no optimization space, need to follow a certain principle in use: as far as possible only when traversing data-type objects to use the for-in loop.
If the properties of the traversal object are unambiguous, you can use an array loop instead.
For example, to traverse a contact object:
Copy Code code as follows:

var acontact = ["N", "FN", "EMAIL;" Pref ", ...];
for (var i = acontact.length I-= 1;) {
Fdosomething (Acontact[i]);
}

Duff strategy
The main principle of the Duff strategy is to increase efficiency by expanding the number of cycles. For example
A common cycle:
Copy Code code as follows:

for (var i = avalues.length I-= 1) {
Fdosomething (Avalues[i]);
}

If avalues.length = N, the efficiency of this approach is higher than the following:
Copy Code code as follows:

Fdosomething (Avalues[0]);
Fdosomething (Avalues[1]);
Fdosomething (avalues[2]);
Fdosomething (Avalues[3]);
...
...
Fdosomething (avalues[n-1]);

But if n is very large, this kind of writing is not realistic, and the Duff strategy is a modest cyclic expansion strategy.
Recently in NetEase mailbox Address Book contact person's initialization cycle has added the Duff strategy:
Copy Code code as follows:

var nlength = Acontacts.length,
Total number of rounds
Nrounds = Math.floor (NLENGTH/8),
Extra allowance
Nleft = nlength% 8,
i = 0;
Deal with the allowance first
if (nleft) {
do{
Fformat (acontacts[i + +));
}while (--Nleft)
}
8 times per round of formatting
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 loop can perform the formatting of 8 contact data, and a round of loops is used to process the remaining contacts. This shows that in the case of more contact with the total number of cycles greatly reduced, can reduce the cycle of consumption. In addition, 8 is the optimal value proposed by Duff strategy.
The actual test found that in IE can bring more than 10-20% performance improvement, and not IE browser almost see no difference.
Conclusion: In the test process is found in non-ie browser, optimization and optimization before the efficiency gap is not very large, even can be ignored, which shows that these browsers JS engine
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.