Question

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

jQuery grep功能
原生JavaScript filter功能

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

words数组由100万个随机生成的字符串构成。每种方法运行20次。令我惊讶的是jQuery grep函数更快。

执行时间（20次执行）：

jQuery grep函数 26,31s
原生JavaScript filter功能 34,66s

您可以对此jsFidle重复测量 - 执行需要一些时间，请耐心等待。

有没有解释为什么jQuery grep功能比原生 JavaScript filter功能更快？

PS：这个问题的灵感来自answer。

Answer 1

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

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检查Alexander是否为非缩小，感谢the algorithm）

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 (modified Alexander's jsperf)大致相同。

JQuery grep（...）VS本机JavaScript过滤器（...）函数性能

1 个答案: