JQuery grep(...)VS本机JavaScript过滤器(...)函数性能

Question

我测量了这两个函数的执行时间:

• jQuery grep函数
• 原生JavaScript 过滤功能

使用Chrome配置文件工具测量了以下方法的执行情况:

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

数组由words100万个随机生成的字符串构成.每种方法运行20次.令我惊讶的是jQuerygrep功能更快.

执行时间(20次执行):

• jQuery grep函数26,31s
• 原生JavaScript 过滤功能34,66s

你可以在这个jsFidle上重复测量- 执行需要一些时间,所以请耐心等待.

有没有解释为什么jQuery grep函数比原生 JavaScript 过滤器功能更快？

PS:这个问题的灵感来自于这个答案.

Answer 1

通过比较$.grep页面上实际使用的jQuery函数

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
}

(根据指定的算法检查此处是非缩小的,感谢Alexander)

Array.prototype.filter.

这在我看来就像.filter部队的this到对象,检查回调IsCallable并设置this它,以及检查在每次迭代特性的存在,而.grep假设并跳过这些步骤,这意味着有略少回事.

将其与Chrome中的JavaScript编译器的优点结合起来,您可能会发现速度差异.

添加其中的一些$.grep将使它看起来像

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

并且大约在同一时间.filter (修改过Alexander的jsperf).