Являются ли селекторы jQuery: first и: eq (0) функционально эквивалентными? - PullRequest
16 голосов
/ 05 августа 2009

Я не уверен, использовать ли :first или :eq(0) в селекторе. Я уверен, что они всегда будут возвращать один и тот же объект, но один ли быстрее другого?

Я уверен, что кто-то здесь, должно быть, тестировал эти селекторы раньше, и я не уверен, что лучший способ проверить, быстрее ли один.

Обновление: вот скамья, на которой я бегал:

/* start bench */
for (var count = 0; count < 5; count++) {
    var i = 0, limit = 10000;
    var start, end;
    start = new Date();
    for (i = 0; i < limit; i++) {
        var $radeditor = $thisFrame.parents("div.RadEditor.Telerik:eq(0)");
    }
    end = new Date();
    alert("div.RadEditor.Telerik:eq(0) : " + (end-start));
    var start = new Date();
    for (i = 0; i < limit; i++) {
        var $radeditor = $thisFrame.parents("div.RadEditor.Telerik:first");
    }
    end = new Date();
    alert("div.RadEditor.Telerik:first : " + (end-start));
    start = new Date();
    for (i = 0; i < limit; i++) {
        var radeditor = $thisFrame.parents("div.RadEditor.Telerik")[0];
    }
    end = new Date();
    alert("(div.RadEditor.Telerik)[0] : " + (end-start));
    start = new Date();
    for (i = 0; i < limit; i++) {
        var $radeditor = $($thisFrame.parents("div.RadEditor.Telerik")[0]);
    }
    end = new Date();
    alert("$((div.RadEditor.Telerik)[0]) : " + (end-start));
}
/* end bench */

Я предполагал, что 3-й будет самым быстрым, а 4-й - самым медленным, но вот результаты, которые я получил:

FF3:    :eq(0)  :first  [0] $([0])
trial1  5275    4360    4107    3910
trial2  5175    5231    3916    4134
trial3  5317    5589    4670    4350
trial4  5754    4829    3988    4610
trial5  4771    6019    4669    4803
Average 5258.4  5205.6  4270    4361.4

IE6:    :eq(0)  :first  [0] $([0])
trial1  13796   15733   12202   14014
trial2  14186   13905   12749   11546
trial3  12249   14281   13421   12109
trial4  14984   15015   11718   13421
trial5  16015   13187   11578   10984
Average 14246   14424.2 12333.6 12414.8

Я был прав, когда просто возвращал первый собственный DOM-объект, являющийся самым быстрым ([0]), но я не могу поверить, что перенос этого объекта в функцию jQuery был быстрее, чем :first и :eq(0)!

Если я не делаю это неправильно.

Ответы [ 3 ]

12 голосов
/ 09 апреля 2013

Согласно исходному коду jQuery, .first() - это просто удобная оболочка для .eq(0):

first: function() {
    return this.eq( 0 );
},
6 голосов
/ 21 января 2010

2018: Да, :first и :eq(0) возвращают один и тот же результат, хотя разница в производительности будет незначительной и, возможно, даже незначительной в 2018 году.

2010: Хороший вопрос и отличный пост. Я проверял это некоторое время назад и не мог вспомнить точный результат. Я очень рад, что нашел это, потому что это именно то, что я искал.

Я бы предположил, что причина того, что :first и :eq(0) немного медленнее, скорее всего, связана с производительностью парсинга. Отказ от этого позволяет движку jQuery использовать собственные функции getElementsByTagName и getElementsByClassName.

Никаких сюрпризов, т.е. элемент DOM является самым быстрым для доступа. Обертывание элемента DOM с помощью jQuery в цикле для не обязательно окажет негативное влияние на производительность, поскольку jQuery использует свойство expando для целей кэширования.

Тем не менее, было бы интересно посмотреть, как get(0) сравнивается с доступом к элементу DOM и как его оборачивание jQuery соответствует eq(0) и остальным результатам.

6 голосов
/ 05 августа 2009

Да, они эквивалентны.

Нет, они вряд ли будут существенно различаться (все остальное - микрооптимизация).

...