Javascript-Leistung des Arrays.anzeigen

Nur schrieb einige Testfälle in jsperf zu testen, den Unterschied zwischen benannten und anonymen Funktionen während der Verwendung Array.map und andere alternativen.

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

(entschuldigen Sie den url-Namen, es gibt keine Prüfung von Array.reduce hier, ich nannte den test, bevor Sie vollständig darüber zu entscheiden, was ich testen wollte)

Eine einfache for/while-Schleife ist natürlich der Schnellste, ich bin immer noch überrascht über den mehr als 10x langsamer Array.map obwohl...

Dann habe ich versucht die polyfill von 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;
};

Dann habe ich versucht, eine einfache Implementierung, die ich selbst geschrieben habe...

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

Zusammenfassung der Ergebnisse:

Vom schnellsten zum langsamsten:

1. Für einfache/while (ungefähr das gleiche)
2. Karte 3 (meine eigene Implementierung)
3. Map2 (Mozilla polyfill)
4. Array.map
5. für

Beobachtungen

Eine interessante Anmerkung ist, dass die genannten Funktionen sind in der Regel ein bisschen schneller, als wenn man anonyme Funktionen (etwa 5%). Aber ich merkte, dass der polyfill ist langsamer mit der genannten Funktionen in firefox, aber schneller in Chrom, aber Chrom-eigene map-Implementierung langsamer ist, mit der genannten Funktionen... getestet habe ich dies über 10x jeweils so, auch wenn es nicht gerade einer intensiven Testphase (jsperf bereits tut), es sei denn, mein Glück ist, dass es große genug sein sollte als Richtlinie.

Auch, chrome map Funktion ist bis zu 2x langsamer als firefox auf meinem Rechner. Hatte nicht erwartet, dass überhaupt.

... Firefox-eigenen Array.map Umsetzung ist langsamer als der Mozilla Polyfill... haha

Ich bin mir nicht sicher, warum ECMA-262-Spezifikationen Zustand, dass map können verwendet werden für andere Objekte als Arrays (http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.19). Das macht die gesamte Karte-Funktion 3-4-mal langsamer (siehe bei meinen tests), wie Sie benötigen, zu prüfen, für die Eigenschaft Existenz in jedem loop...

Abschluss

Gibt es nicht wirklich viel Unterschied zwischen benannten und anonymen Funktionen, wenn man bedenkt, dass verschiedene Browser führen etwas anders.

Am Ende des Tages, sollten wir nicht wirklich micro-Optimierung zu viel, aber ich fand das interessant 🙂

InformationsquelleAutor Populus | 2014-03-04