JavaScript优化：利用分块处理避免脚本失控警告

脚本失控警告的成因与规避思路

在之前的讨论中，我们分析了各浏览器触发脚本失控提示的机制。对于Internet Explorer，当执行语句数量过多时会停止脚本；而其他浏览器则在脚本持续运行超过一定时间后给出提示。本文的核心不在于浏览器如何探测失控脚本，而在于探讨如何让脚本运行得更快，从而避免这些警告。

导致脚本失控的主要原因通常包括以下四个方面：

在循环中执行了过多的操作。

函数体过于臃肿。

存在过多的递归调用。

进行了过多的DOM操作。

本文将重点放在第一条：循环中的过多操作。由于循环操作是同步执行的，其耗时完全取决于循环次数。因此，导致循环执行时间过长并锁定浏览器的情况主要有两种：一是循环体内包含的操作过多，二是循环次数过多。这两种情况都会直接导致浏览器锁定并显示脚本失控提示。

评估循环同步性与顺序性的关键

解决这一问题的关键在于通过以下两个问题来评估每个循环：

该循环是否必须同步执行？

循环内的数据是否必须按顺序处理？

如果上述两个问题的答案均为“否”，则可以考虑将循环内的操作进行分解。关键在于根据代码的具体环境确定这两个问题的答案。一个典型的循环示例如下：

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

乍看之下，这个循环似乎没有大问题，其运行时长完全取决于循环次数。如果循环后没有其他代码依赖其结果，那么对第一个问题的答案是“不”。此外，由于循环每次仅处理一个数值且不依赖前一次循环的结果，对第二个问题的答案也是“否”。这意味着，该循环可以通过某种方式拆解，从而避免锁定浏览器或显示脚本失控提示。

分块处理（Chunking）实现方案

在《Professional JavaScript, Second Edition》一书中，针对执行次数巨大的循环，推荐采用以下处理方式：

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

chunk()函数的作用是将一个数组分成小块进行处理（这也是其命名的由来）。该函数接收三个参数：要处理的数组对象、处理函数以及一个可选的上下文变量，用于设置process()函数中的this对象。第一个定时器用于设置操作之间的延时（此处设为100毫秒，可根据实际需求调整）。每次执行该函数时，会取出数组中的第一个对象并传给process()函数进行处理。如果process()中仍有未处理完的对象，另一个定时器将启动以重复等待。上述提到的循环可以通过以下方式调用该函数：

chunk(items, process);

需要注意的是，此处数组采用了队列（queue）形式，且在循环过程中数组状态会被修改。如果需要保持数组的原始状态，有两种途径：一种是通过concat()函数，在传递之前建立当前数组的副本：

chunk(items.concat(), process);

另一种选择是直接修改chunk()函数，在函数内部进行修改：

 
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);
} 

这种方法比仅保存索引要安全得多，因为数组内容可能在下一个定时器生效前发生变化。

这里提到的chunk()函数仅是优化循环性能的一个起点。你可以根据需要不断改进它，增加更多功能。例如，可以在数组中所有对象处理完成后增加一个回调函数。无论你是否按此方式修改函数，这只是一种JavaScript代码开发模式，有助于优化数组处理性能，并避免脚本失控警告。