如何提升JavaScript函数的运行速度

如何提升JavaScript函数的运行速度2010-02-21 w3cgroup Nicholas为您讲解如何提升JavaScript函数的运行速度！

这篇是Nicholas讨论如果防止脚本失控的第二篇，主要讨论了如何重构嵌套循环、递归，以及那些在函数内部同时执行很多子操作的函数。基本的思想和上一节trunk（）那个例子一致，如果几个操作没有特定的执行顺序，而且互相不是依赖关系，我们就可以通过异步调用的方式加以执行，不止可以减少执行的次数，还可以防止脚本失控。本文还介绍了通过memoization技术取代递归的方法。

【原文标题】Speed up your JavaScript, Part 2

【原文作者】Nicholas C. Zakas

上周我在《too much happening in a loop》（译文）这篇文章中介绍了JavaScript运行时间过长的第一个原因。相似的情况有时也出现在函数的定义上，函数也可能因为使用不当而过载使用。通常情况是函数内包含了过多的循环（不是在循环中执行了过多的内容），太多的递归，或者只不过是太多不相干但又要一起执行的操作。

太多的循环经常是以嵌套的形式出现，这种代码会一直占用JavaScript引擎直至循环结束。这方面有一个非常著名的例子，就是使用冒泡算法排序。由于 JavaScript有内置的sort（）方法，我们没有必要使用这种方式进行排序，但我们可以借助这个算法理解嵌套循环占用资源的症结所在，从而避免类似情况的发生。下面是一个在JavaScript使用冒泡排序法的典型例子：

function bubbleSort（items） {
for （var i = items.length - 1; i >= 0; i--） {
for （var j = i; j >= 0; j--） {
if （items[j] < items[j - 1]） {
var temp = items[j];
items[j] = items[j - 1];
items[j - 1] = temp;
}
}
}
}

回忆一下你在学校学习的计算机知识，你可能记得冒泡排序法是效率最低的排序算法之一，原因是对于一个包含n个元素的数组，必须要进行n的平方次的循环操作。如果数组中的元素数非常大，那么这个操作会持续很长时间。内循环的操作很简单，只是负责比较和交换数值，导致问题的最大原因在于循环执行的次数。这会导致浏览器运行异常，潜在的直接结果就是那个脚本失控的警告对话框。

几年前，Yahoo的研究员Julien Lecomte写了一篇题为《Running CPU Intensive JavaScript Computations in a Web Browser》的文章，在这篇文章中作者阐述了如何将很大的javaScript操作分解成若干小部分。其中一个例子就是将冒泡排序法分解成多个步骤，每个步骤只遍历一次数组。我对他的代码做了改进，但方法的思路还是一样的：

function bubbleSort（array, onComplete） {
var pos = 0; （function（） {
var j, value;
for （j = array.length; j > pos; j--） {
if （array[j] < array[j - 1]） {
value = data[j];
data[j] = data[j - 1];
data[j - 1] = value;
}
}
pos++;
if （pos < array.length） {
setTimeout（arguments.callee, 10）;
} else {
onComplete（）;
}
}）（）;
}

这个函数借助一个异步管理器来实现了冒泡算法，在每次遍历数组以前暂停一下。onComplete（）函数会在数组排序完成后触发，提示用户数据已经准备好。bubbleSort（）函数使用了和chunk（）函数一样的基本技术（参考我的上一篇帖子），将行为包装在一个匿名函数中，将 arguments.callee传递给setTimeout（）以达到重复操作的目的，直至排序完成。如果你要将嵌套的循环拆解成若干个小步骤，以达到解放浏览器的目的，这个函数提供了不错的指导意见。

相似的问题还包括过多的递归。每个额外的递归调用都会占用更多的内存，从而减慢浏览器的运行。恼人的是，你可能在浏览器发出脚本失控警告之前，就耗尽了系统的内存，导致浏览器处于停止响应的状态。Crockford在博客上曾经对这个问题进行过深入的讨论。他当时使用的例子，就是用递归生成一个斐波那契数列。

function fibonacci（n） {
return n < 2 ？ n: fibonacci（n - 1） + fibonacci（n - 2）;
};