Array.map的Javascript性能 [英] Javascript performance of Array.map

问题描述

刚刚在jsperf中编写了一些测试用例来测试命名和匿名函数之间的区别，同时使用 Array.map 和其他替代方法。

Just wrote up some test cases in jsperf to test the difference between named and anonymous functions while using Array.map and other alternatives.

http://jsperf.com/map-reduce-named-functions

（原谅网址名称，这里没有 Array.reduce 的测试，我在完全决定之前命名了测试关于我想测试的内容）

(excuse the url name, there is no testing of Array.reduce in here, I named the test before fully deciding on what I wanted to test)

一个简单的for / while循环显然是最快的，我仍然对速度慢了10倍以上感到惊讶 Array.map 虽然...

A simple for/while loop is obviously the fastest, I'm still surprised by the more than 10x slower Array.map though...

然后我尝试了mozilla的polyfill https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map# Polyfill

Then I tried the polyfill by mozilla https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Polyfill

Array.prototype.map = function(fun /*, thisArg */)
{
    "use strict";

    if (this === void 0 || this === null)
        throw new TypeError();

    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== "function")
        throw new TypeError();

    var res = new Array(len);
    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
    for (var i = 0; i < len; i++)
    {
        // NOTE: Absolute correctness would demand Object.defineProperty
        //       be used.  But this method is fairly new, and failure is
        //       possible only if Object.prototype or Array.prototype
        //       has a property |i| (very unlikely), so use a less-correct
        //       but more portable alternative.
        if (i in t)
            res[i] = fun.call(thisArg, t[i], i, t);
    }

    return res;
};

然后我尝试了一个我自己编写的简单实现...

Then I tried a simple implementation that I wrote myself...

Array.prototype.map3 = function(callback /*, thisArg */) {
    'use strict';
    if (typeof callback !== 'function') {
        throw new TypeError();
    }

    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;

    for (var i = 0, len = this.length; i < len; i++) {
        this[i] = callback.call(thisArg, this[i], i, this);
    };
};

结果摘要：

从最快到最慢：

1. 简单/ while（大约相同）


2. Map3（我自己的实现）


3. Map2（Mozilla polyfill）


4. Array.map


5. for in

1. For simple/while (about the same)
2. Map3 (my own implementation)
3. Map2 (Mozilla polyfill)
4. Array.map
5. for in

观察

有趣的是，命名函数通常比使用匿名函数（约5％）快得多。但是我注意到polyfill在firefox中的命名函数速度较慢，但​​在chrome中速度较快，但是chrome的自己的map实现在命名函数中较慢...我测试了这个函数大约10x，所以即使它不是完全密集测试（jsperf）已经这样做了，除非我的运气很好，它应该足够作为指导。

An interesting note is that named functions are usually alittle faster than if you use anonymous functions (around 5%). But I noticed that the polyfill is slower with named functions in firefox, but faster in chrome, but chrome's own map implementation is slower with named functions... I tested this about 10x each, so even if it's not exactly intensive testing (which jsperf already does), unless my luck is that great it should be enough as a guideline.

此外，chrome的地图功能比我机器上的firefox慢2倍。根本没想到。

Also, chrome's map function is up to 2x slower than firefox on my machine. Didn't expect that at all.

而且...... firefox自己的 Array.map 实现比Mozilla Polyfill ...哈哈

And... firefox's own Array.map implementation is slower than the Mozilla Polyfill... haha

我不确定为什么ECMA-262规范声明可以使用 map 对于阵列以外的对象（ http://www.ecma-international.org/ecma -262 / 5.1 /＃仲丁基15.4.4.19 ）。这使整个地图的功能慢了3-4倍（如我的测试所示），因为你需要检查每个循环的属性是否存在...

I'm not sure why ECMA-262 specs state that map can be used for objects other than Arrays (http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.19). That makes the whole map function 3-4 times slower (as shown in my tests) as you need to check for property existence every loop...

结论

如果您认为不同的浏览器的执行方式略有不同，则命名和匿名函数之间没有太大区别。

There isn't really much difference between named and anonymous functions, if you consider that different browsers perform slightly differently.

在一天结束时，我们不应该真正进行微观优化，但我发现这很有趣：）

At the end of the day, we shouldn't really micro-optimize too much, but I found this interesting :)

推荐答案

首先，这不是一个公平的比较。如你所说，正确的javascript地图能够使用对象，而不仅仅是数组。因此，您基本上将两个完全不同的函数与不同的算法/结果/内部工作进行比较。

Well first of all, it's not a fair comparison. As you said, the proper javascript map is able to use objects, not just arrays. So you are basically comparing two completely different functions with different algorithms/results/inner workings.

当然，正确的javascript地图速度较慢 - 它设计用于较大的域而不是数组的简单域。

Of course the proper javascript map is slower - it is designed to work over a larger domain than a simple for over an array.

这篇关于Array.map的Javascript性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！