JavaScript 执行性能比较和性能测试的方法（作者万戈）

JavaScript 执行性能比较和性能测试的方法（作者-万戈）

JavaScript 松散的语言特性注定了它是一门灵活的语言，为了达到同一种功能或者效果，我们可能会有多种不同的实现方法，但是哪种方法才是最好的呢？我们又可以从可读性、可扩展以及执行性能等方面去比较。本文就从执行性能的角度探讨一下客观、直观的 JavaScript 性能比较和性能测试的方法。

为什么要做 JavaScript 的性能测试和比较？

很多人都会有这样的疑问，现在的计算机硬件都在提升，执行的响应速度越来越快，浏览器的解释器也越来越强大，JS 的性能问题还值得关注吗？确实，JavaScript 有良好的垃圾回收机制，区区几个内存泄漏也不会导致我们的电脑崩溃，但我们依然要追求极致的用户体验，特别是在 JavaScript 处理动画效果等大量的运算时，性能问题就尤为突出，不可小觑。

怎么做 JavaScript 的性能测试和比较？

随着越来越多的人重视 JavaScript 的性能问题，也有越来越多的 JS 性能测试框架和一些工具诞生，比如说 JSLitmus、jsperf 等等，今天本文探讨的是一种比较简单、实用、容易上手的 JS 性能测试的方法。

举例来说，现在有一个只包含数字类型的数组，然后我会用两种方法对数组元素求和，比较两个方法的性能。

首先生成这么一个长度是 10000 的 [0, 1, 2, 3, .... 9999] 数组，长度不能太短，否则比较差值不大，效果不是很明显。

var arr = [],     // 声明一个空数组
    sum = 0;      // 总和初始值
     
// 生成一个长度是 10000 的数组
for (var index = 0, len = 10000; index<len; index++) {
    arr.push(index);
}

第一种方法是用 for 循环去累加 sum 变量，得到最终结果。

// for 循环
function forLoop(arr) {
    var i = 0,
        l = arr.length;
    for (; i<l; i++) {
        sum += arr[i];
    }
}

第二种方法是用递归，用数组的 shift() 方法每次删除数组的第一个元素，并将其累加，递归执行。

// shift 递归
function shiftLoop(arr) {
    if (!!arr.length) {
        sum += arr.shift();
        arguments.callee(arr);
    }
}

分别执行以上这两个方法，其实功能都是一样一样的，而我们肉眼几乎无法分辨这两者到底谁执行的更快，这时候我们就要用事实说话，让数据说话，编写以下简单的性能测试函数，就能知道答案了。

// 最简单的性能测试函数
function test(fn, param) {
    var s, d;
    // 记录执行的起始时间
    s = new Date().getTime();
    // 执行待测试的方法
    fn(param);
    // 记录执行的结束时间
    d = new Date().getTime();
    // 输出待测试方法所运行的结果和耗时
    alert( '计算结果：' + sum + '，耗时：' + (d-s) + '毫秒' );
}

最后，再分别执行刚才编写的 test() 方法，其参数就是需要测试的方法名和该方法所用到的参数：

// 分别执行看结果
// test(forLoop, arr);
test(shiftLoop, arr);

在我的电脑上测试发现，用 for 循环仅需 0~1 毫秒，而用 shift 递归则需要 75 毫秒左右，可见经过比较得知，for 循环比 shift 递归执行速度更快，性能更佳！

只要了解其中原理，在平时写 JS 的过程中对性能有犹豫的时候，你也可以编写这么一个简单的方法来帮助你择优录取！