如何提高JavaScript的运行速度（循环篇）

根据Nicholas的说法，有四种代码会拖慢脚本的运行，并最终致使脚本失控。分别是次数过多的同步循环、庞大的函数体、不恰当的递归和不合理的DOM调用。这篇着重讲第一个缘由。最后给出了一个开发模式，替换传统的循环结构，能够彻底避免脚本失控的情况发生。

【原文标题】Speed up your JavaScript, Part 1
【原文做者】Nicholas C. Zakas
译文出自：http://cuimingda.com/2009/01/speed-up-your-javascript-part-1.html

在我上一篇帖子（译文：浏览器根据什么来断定脚本失控？） 中，谈到了各个浏览器究竟会在什么状况下弹出脚本失控提示，对于Internet Explorer来讲，当浏览器执行了数量过多的语句时就会中止执行脚本，而其余的浏览器，则是持续执行脚本超过必定时间的时候就会给出提示。而咱们要探 讨的核心问题，不是这些浏览器若是探测失控的脚本，而是咱们如何才可让脚本运行的更快一些，从而避免这些警告。

脚本失控基本上有如下四个方面的缘由：
1. 在循环中执行了太多的操做。
2. 臃肿的函数体
3. 过多的递归
4. 过多的DOM调用

在 这篇帖子中，我将会把重点放到第一条上：循环中的过多操做。循环的操做是同步进行的，因此执行一个循环所花费的时间彻底取决于循环的次数。所以有两种状况 会致使循环执行的时间过长，并直接致使锁定浏览器。一是循环体中包含了太多的操做，二是循环的次数过多。这两种状况都能直接致使锁定浏览器，并显示脚本失 控的提示。

解决这个问题的诀窍就是用下面这两个问题来评估每一个循环：
1. 这个循环必需要同步执行么？
2. 循环里面的数据，必需要按顺序执行么？

若是两个问题的答案都是否认的话，你就能够选择将循环里的操做进行分解。关键是要根据代码的具体环境肯定上面两个问题的答案。一个典型的循环可能像下面这个样子：

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

乍一看这个循环并无太大的问题，是否是会运行很长时间彻底取决于循环的次数。若是紧接循环后没有其余代码在执行的时候须要依赖于循环的结果，那么对于第 一个问题的答案就是“不”。你还能够发现，循环每次只处理一个数值，并且不依赖于上一次循环的结果，因此对于第二个问题的答案一样也是否认的。这就意味 着，循环能够经过某种方式进行拆解，不会致使锁定浏览器而显示脚本失控的提示。

在《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对象。第一个timer用于处理操做之间的延时（这里设置为100毫秒，你们能够根据实际须要自行修 改）。每次执行这个函数，都会将数组中的第一个对象取出，并传给process()函数进行操做，若是这时process()中还有未处理完的对象，另外 一个timer就会启动，用于重复等待。上面提到的循环，能够经过下面的方法使用这个函数：

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的代码开发模式，能够帮助优化数组的处理性能，还能够避免那个脚本失控的警告。