JQuery grep (...) VS nativer JavaScript-Filter (...) Funktion Leistung

Question

gemessen ich die Ausführungszeiten dieser beiden Funktionen:

• jQuery grep Funktion
• Mutter JavaScript filter Funktion

Chrome Profiles Werkzeug

Die Ausführung der folgenden Methoden gemessen wurden:

// jQuery GREP function 
function alternative1(words, wordToTest) { 
    return $.grep(words, function(word) { 
    return wordToTest.indexOf(word) != -1;      
    }); 
} 

// Native javascript FILTER function   
function alternative2(words, wordToTest) { 
    return words.filter(function(word) { 
    return wordToTest.indexOf(word) != -1;      
    }); 
} 

Das Array words wurde aus 1 Million zufällig generierten Strings aufgebaut. Jede Methode wurde 20 Mal ausgeführt. Auf meine Überraschung jQuery Grep-Funktion war schneller.

mal Execution (20 Hinrichtungen):

• jQuery grep Funktion 26,31s
• Mutter JavaScript filter Funktion 34,66s

Sie Messungen auf diese jsFidle repeate kann - Es wird einige Zeit dauern, um auszuführen, also sei geduldig.

Gibt es eine Erklärung, warum jQuery grep Funktion schneller als native JavaScript filter Funktion?

PS: Diese Frage wurde von dieser answer inspiriert.

Answer 1

durch die tatsächliche jQuery Funktion $.grep Vergleich verwendet man auf der Seite

function (a, b, c) { 
    var d = [], 
     e; 
    c = !! c; 
    for (var f = 0, g = a.length; f < g; f++) e = !! b(a[f], f), c !== e && d.push(a[f]); 
    return d 
} 

(überprüfen here für nicht-minimierte dank Alexander) gegen the algorithm für

Array.prototype.filter

angegeben.

Es mir wie .filter sieht zwingt seine this zu Objekt, IsCallable den Rückruf prüft und setzt die this darin sowie in jeder Iteration für Existenz Eigenschaft überprüfen, während .grep geht davon aus und überspringt diese Schritte, das heißt, es gibt etwas weniger los.

Kombinieren Sie dies mit wie gut der JavaScript-Compiler in Chrome ist und Sie könnten den Geschwindigkeitsunterschied finden.

einige davon in $.grep Hinzufügen wäre es wie

function (elems, callback, inv, thisArg) { 
    var ret = [], 
     retVal; 
    inv = !!inv; 
    for (var i = 0, length = elems.length; i < length; i++) { 
     if (i in elems) { // check existance 
      retVal = !!callback.call(thisArg, elems[i], i); // set callback this 
      if (inv !== retVal) { 
       ret.push(elems[i]); 
      } 
     } 
    } 
    return ret; 
} 

und nehmen etwa zur gleichen Zeit wie .filter(modified Alexander's jsperf) aussehen.