为什么jQuery inArray太慢了?

时间:2021-06-15 04:13:12

I ran some tests, and the data point that the jQuery inArray() is much slower than a simple loop.

我运行了一些测试,数据指出jQuery inArray()比一个简单的循环要慢得多。

And array.indexOf() is not even on the tests because I previously did other tests, and it performed even worse.

并且array.indexOf()甚至没有在测试中,因为我以前做过其他测试,并且表现更差。

  • Why it is much slower?
  • 为什么它慢得多?

  • Why don't they use simple loops?
  • 他们为什么不使用简单的循环?

  • Is there something that I am overseeing?
  • 我有什么东西在监督吗?

There must be a good reason for not using this:

必须有充分的理由不使用它:

for(var i=0,len=arr.length,rtn=-1;i<len;i++){
    if(arr[i]==="arritem"){
        rtn=i;
        break;
    }
}

2 个解决方案

#1


5  

If you're going to test jQuery's inArray, actually test jQuery's inArray, and compare apples to apples (calling a function to calling a function — you can write the loop inline in places where performance is hugely critical, but it wouldn't be your default move, presumably): http://jsperf.com/inarraytest/3

如果你要测试jQuery的inArray,实际测试jQuery的inArray,并比较苹果和苹果(调用一个函数调用一个函数 - 你可以在性能非常关键的地方内联编写循环,但它不会是你的默认移动,大概):http://jsperf.com/inarraytest/3

Preparation HTML:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>

Preparation code:

var arr=[0,1,2,3,4,5,6,7,8,9];

function arrayLoop(elem, array, i) {
    var len = array.length;
    i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;
    for ( ; i < len; i++ ) {
        // Skip accessing in sparse arrays
        if ( i in array && array[ i ] === elem ) {
            return i;
        }
    }
    return -1;
}

Tests:

// jQuery.inArray last
var rtn=jQuery.inArray(9,arr);

// arrayLoop last
var rtn = arrayLoop(9,arr);

// jQuery.inArray middle
var rtn=jQuery.inArray(4,arr);

// arrayLoop middle
var rtn = arrayLoop(4,arr);

// jQuery.inArray first
var rtn=jQuery.inArray(0,arr);

// arrayLoop first
var rtn = arrayLoop(0,arr);

Results on Chrome (which has indexOf) are that jQuery.inArray is always faster than arrayLoop (in the first pair of test cases, where we're searching for the last entry, dramatically so).

Chrome(具有indexOf)的结果是jQuery.inArray总是比arrayLoop快(在第一对测试用例中,我们正在搜索最后一个条目,非常明显)。

Results on IE6 (which doesn't have indexOf): jQuery.inArray is always faster than arrayLoop, though unsurprisingly not by much (as it has to do essentially the same work) — except, curiously, in the case where we're searching for the first entry in the array, in which case it's much faster.

IE6上的结果(没有indexOf):jQuery.inArray总是比arrayLoop快,但不足为奇(因为它必须完成同样的工作) - 除了奇怪的是,在我们搜索的情况下对于数组中的第一个条目,在这种情况下它会快得多。

#2


3  

What you are doing is just a part of the same jQuery $.inArray code and of course it will be faster when you take a snippet of the code and test that functionality alone. Check all the conditions that are validated before it actually iterates through the list to look for the element.

你正在做的只是相同的jQuery $ .inArray代码的一部分,当然,当你拿一段代码并单独测试这个功能时,它会更快。检查在实际迭代列表之前验证的所有条件以查找元素。

That is the extra time between the simple loop and $.inArray().

这是简单循环和$ .inArray()之间的额外时间。

Finally: You can stick to the simple loop if you know the following for sure,

最后:如果您确定知道以下内容,您可以坚持使用简单的循环,

  1. Input is always an array
  2. 输入始终是一个数组

  3. Option of sending the start Index to make your search faster.
  4. 选择发送开始索引以加快搜索速度。

  5. Use of native browser indexOf function.
  6. 使用本机浏览器indexOf函数。

#1


5  

If you're going to test jQuery's inArray, actually test jQuery's inArray, and compare apples to apples (calling a function to calling a function — you can write the loop inline in places where performance is hugely critical, but it wouldn't be your default move, presumably): http://jsperf.com/inarraytest/3

如果你要测试jQuery的inArray,实际测试jQuery的inArray,并比较苹果和苹果(调用一个函数调用一个函数 - 你可以在性能非常关键的地方内联编写循环,但它不会是你的默认移动,大概):http://jsperf.com/inarraytest/3

Preparation HTML:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>

Preparation code:

var arr=[0,1,2,3,4,5,6,7,8,9];

function arrayLoop(elem, array, i) {
    var len = array.length;
    i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;
    for ( ; i < len; i++ ) {
        // Skip accessing in sparse arrays
        if ( i in array && array[ i ] === elem ) {
            return i;
        }
    }
    return -1;
}

Tests:

// jQuery.inArray last
var rtn=jQuery.inArray(9,arr);

// arrayLoop last
var rtn = arrayLoop(9,arr);

// jQuery.inArray middle
var rtn=jQuery.inArray(4,arr);

// arrayLoop middle
var rtn = arrayLoop(4,arr);

// jQuery.inArray first
var rtn=jQuery.inArray(0,arr);

// arrayLoop first
var rtn = arrayLoop(0,arr);

Results on Chrome (which has indexOf) are that jQuery.inArray is always faster than arrayLoop (in the first pair of test cases, where we're searching for the last entry, dramatically so).

Chrome(具有indexOf)的结果是jQuery.inArray总是比arrayLoop快(在第一对测试用例中,我们正在搜索最后一个条目,非常明显)。

Results on IE6 (which doesn't have indexOf): jQuery.inArray is always faster than arrayLoop, though unsurprisingly not by much (as it has to do essentially the same work) — except, curiously, in the case where we're searching for the first entry in the array, in which case it's much faster.

IE6上的结果(没有indexOf):jQuery.inArray总是比arrayLoop快,但不足为奇(因为它必须完成同样的工作) - 除了奇怪的是,在我们搜索的情况下对于数组中的第一个条目,在这种情况下它会快得多。

#2


3  

What you are doing is just a part of the same jQuery $.inArray code and of course it will be faster when you take a snippet of the code and test that functionality alone. Check all the conditions that are validated before it actually iterates through the list to look for the element.

你正在做的只是相同的jQuery $ .inArray代码的一部分,当然,当你拿一段代码并单独测试这个功能时,它会更快。检查在实际迭代列表之前验证的所有条件以查找元素。

That is the extra time between the simple loop and $.inArray().

这是简单循环和$ .inArray()之间的额外时间。

Finally: You can stick to the simple loop if you know the following for sure,

最后:如果您确定知道以下内容,您可以坚持使用简单的循环,

  1. Input is always an array
  2. 输入始终是一个数组

  3. Option of sending the start Index to make your search faster.
  4. 选择发送开始索引以加快搜索速度。

  5. Use of native browser indexOf function.
  6. 使用本机浏览器indexOf函数。