This article focuses on the first reason. Finally, a development pattern is given to replace the traditional loop structure, which can completely avoid the situation that the script is out of control.
Original title:Speed up Your JavaScript, part 1
Original Author:Nicholas C. Zakas
In my last post, I talked about the situations in which browsers would eject a script out of control, and for Internet Explorer, when a browser executes too many statements, it stops executing scripts, and other browsers is to give a hint when the script continues to execute for more than a certain amount of time. And the core issue we're going to explore is not how these browsers detect runaway scripts, but how we can get the scripts to run faster and avoid these warnings.
There are basically four reasons why a script is out of control:
Too many operations were performed in the loop.
A bloated function body
Too many recursion.
Too many DOM calls
In this post, I will focus on the first one: too many operations in the loop. The loop operation is synchronous, so the time spent executing a loop depends entirely on the number of cycles. So there are two situations that can cause the loop to execute too long and lead directly to locking the browser. One is that the loop body contains too many operations, and the second is that the number of cycles is too high. Both of these situations can lead directly to locking the browser and displaying hints that the script is out of control.
The trick to solving this problem is to evaluate each cycle with the following two questions:
Does this loop have to be synchronized?
Does the data inside the loop have to be executed sequentially?
If the answer to the two questions is negative, you can choose to decompose the operation in the loop. The key is to determine the answers to the above two questions based on the specific circumstances of the code. A typical loop might look like this:
Copy Code code as follows:
for (Var i=0 i < items.length; i++) {
Process (Items[i]);
}
At first glance, the cycle does not have much of a problem, and whether it will run for a long time depends entirely on the number of cycles. The answer to the first question is "no" if no other code immediately after the loop needs to rely on the results of the loop. You can also see that the loop handles only one numeric value at a time and does not depend on the results of the previous loop, so the answer to the second question is also negative. This means that loops can be disassembled in some way, without causing a lock on the browser and displaying a hint that the script is out of control.
In the book "Professional JavaScript, Second Edition," I recommend the following ways to deal with the illusion of a very large number of executions:
Copy Code code 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 chunks (which is also the origin of the name), and we can pass three parameters. The array object, handler function, and an optional context variable to be processed to set the corresponding this object in the process () function. The first timer is used to process the delay between operations (set to 100 milliseconds, and you can modify them according to your actual needs). Each time the function is executed, the first object in the array is taken out and passed to the process () function, and if there is an unhandled object in the process (), the other timer is started and used to repeat the wait. The loops mentioned above can use this function in the following ways:
Chunk (items, process);
It should be noted that the array is in the form of queues (queue), and changes are made each time during the loop. If you want to modify the original state of the array, here are two ways: one is through the concat () function, before passing, to create a copy of the current array:
Chunk (Items.concat (), process);
Another option is to modify the chunk () function directly and modify it directly inside the function:
Copy Code code 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 This method is more secure than saving only one 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 cyclic performance. You can keep improving it to make it more functional as needed. For example, after all the objects in the array are processed, you can add a function callback. Whether or not you will modify the function in this way, this is just a JavaScript code development model that can help optimize the performance of the array and avoid the warning that the script is out of control.
