PrimosK PrimosK - 16 days ago 8
Javascript Question

JQuery grep(...) VS native JavaScript filter(...) function performance

I measured the execution times of those two functions:


  • jQuery grep function

  • Native JavaScript filter function



The execution of following methods have been measured using Chrome Profiles tool:

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


Array of
words
was constructed of 1 million randomly generated strings. Each method was run 20 times. On my surprise
jQuery
grep function was faster.

Execution times (20 executions):


  • jQuery grep function 26,31s

  • Native JavaScript filter function 34,66s



You can repeate measurings on this jsFidle - it will take some time to execute so be patient.

Is there any explanation why jQuery grep function is faster then native JavaScript filter function?

PS: This questions was inspired by this answer.

Answer

By comparing the acutual jQuery function $.grep uses on the page

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
}

(here for non-minified, thanks Alexander) against the algorithm specified for Array.prototype.filter.

It looks to me like .filter forces it's this to Object, checks the callback IsCallable and sets this in it as well as checking for existence of property in each iteration whereas .grep assumes and skips these steps, meaning there is slightly less going on.

Combine this with how good the JavaScript compiler in Chrome is and you might find the speed difference.

Adding some of these into $.grep would make it look like

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

and take about the same time as .filter (modified Alexander's jsperf).