JavaScript Loop to Improve Running Speed ​​Translation_Javascript Skills

This article focuses on the first reason. Finally, a development model is given to replace the traditional loop structure, which can completely avoid the situation where the script is out of control.

Original title: Speed ​​up your JavaScript, Part 1
Original author: Nicholas C. Zakas
In my last post (translation), I talked about the circumstances under which each browser will pop up a script out of control prompt. For Internet Explorer, when the browser executes too many statement will stop executing the script, while other browsers will give a prompt when the script continues to be executed for more than a certain period of time. The core issue we want to discuss is not how these browsers detect runaway scripts, but how we can make the scripts run faster to avoid these warnings.
There are basically four reasons why the script is out of control:
Too many operations are performed in the loop.
Bloated function body
Too much recursion
Too many DOM calls
In this post, I will focus on the first one: too many operations in loops. Loops operate synchronously, so the time it takes to execute a loop depends entirely on the number of loops. Therefore, there are two situations that will cause the loop execution time to be too long and directly cause the browser to be locked. One is that the loop body contains too many operations, and the other is that the number of loops is too many. Both of these situations can directly cause the browser to lock up and display a message indicating that the script is out of control.
The trick to solving this problem is to evaluate each loop with the following two questions:
Does this loop have to be executed synchronously?
Does the data in the loop have to be executed in order?
If the answer to both questions is no, you can choose to decompose the operations in the loop. The key is to determine the answers to the above two questions based on the specific context of your code. A typical loop might look like this:

Copy code The code is as follows:

for( var i=0; i process(items[i]);
}

At first glance, there is not much problem with this loop , whether it will run for a long time depends entirely on the number of loops. If there is no other code immediately following the loop that needs to depend on the result of the loop, then the answer to the first question is "no". You can also find that the loop only processes one value at a time and does not depend on the result of the previous loop, so the answer to the second question is also no. This means that the loop can be broken down in a way that doesn't lock the browser with a runaway script message.
In the book "Professional JavaScript, Second Edition", I recommend the following method for handling illusions with very large execution times:

Copy Code The code is as follows:

function chunk(array, process, context){
setTimeout(function(){
var item = array.shift ();
process.call(context, item);
if (array.length > 0){
setTimeout(arguments.callee, 100);
}
}, 100 );
}

The purpose of the chunk() function is to divide an array into small pieces for processing (this is also the origin of the name). We can pass three parameters. The array object to be processed, the processing function, and an optional context variable used to set the corresponding this object in the process() function. The first timer is used to handle the delay between operations (here it is set to 100 milliseconds, you can modify it according to actual needs). Each time this function is executed, the first object in the array will be taken out and passed to the process() function for operation. If there are still unprocessed objects in process() at this time, another timer will be started, using Waiting repeatedly. The loop mentioned above can use this function in the following method:
chunk(items, process);
It should be noted that the array here takes the form of a queue, and during the loop process , modifications will occur every time. If you want to modify the original state of the array, here are two ways: one is to use the concat() function to create a copy of the current array before passing it:
chunk(items.concat(), process);
Another option is to directly modify the chunk() function and modify it directly inside the function:

Copy the code The code is as follows:

function chunk(array, process, context){
var items = array.concat(); //clone the array
setTimeout(function(){
var item = items. shift();
process.call(context, item);
if (items.length > 0){
setTimeout(arguments.callee, 100);
}
}, 100);
}

Note that this method is much safer than just saving an index, because the contents of the array may change before the next timer takes effect.
The chunk() function mentioned here is just a starting point for optimizing loop performance. You can keep improving it to have more features as needed. For example, after all objects in the array have been processed, a function callback can be added. Regardless of whether you will modify the function in this way, this is just a JavaScript code development pattern that can help optimize array processing performance and avoid the warning that the script is out of control.