Кто-нибудь может победить этот селектор jQuery?

Question

Я провел несколько тестов, чтобы выяснить, могу ли я найти эффективный селектор для элементов управления с префиксом id родительских элементов управления в Asp.Net

Я искал это так, как должен был бытьвозможность выбирать элементы управления Asp из внешних файлов JavaScript (я сыт по горло использованием ClientID).

Для проверки я создал страницу со 150 текстовыми полями, все с cssclass "speedy" и индивидуальным идентификатором, и выполнил следующий код, чтобы выбрать 107-е текстовое поле.

function testclientInput() {

    var iterations = 100;
    var totalTime = 0;

    // Record the starting time, in UTC milliseconds.
    var start = new Date().getTime();

    // Repeat the test the specified number of iterations.
    for (i = 0; i < iterations; i++) {
        // Execute the selector. The result does not need
        // to be used or assigned to determine how long 
        // the selector itself takes to run.

        // All tests done in ie6, ie7, ie8, ie9beta, firefox3.6, opera11 & chrome8

        // slowest
        // $('input.speedy[id$=_TextBox107]');

        // Quick but only useful if you know the index.
        //$($('input.speedy')[106]);

        //$('[id$=_TextBox107]:first');

        //$('input[id$=_TextBox107]');

        //$.clientID("TextBox107");

        //$('[id$=_TextBox107]');

        //$('input[id$=_TextBox107]:first');

        //$($('[id$=_TextBox107]')[0]);

       // Fastest
       //$($('input[id$=_TextBox107]')[0]);
    }

    // Record the ending time, in UTC milliseconds.
    var end = new Date().getTime();

    // Determine how many milliseconds elapsed
    totalTime = (end - start);

    // Report the average time taken by one iteration.
    alert(totalTime / iterations);

};

Этолучшее, что я придумал.$($('input[id$=_TextBox107]')[0]);.Результаты оказались удивительными ... Я ожидал, что с помощью селектора :first будет соответствовать моей версии, но он сообщил о гораздо более медленных результатах.

Может кто-нибудь придумать способ оптимизировать это?

Answer 1

Это будет зависеть от браузера.

Эта версия:

$('input[id$=_TextBox107]')

... является допустимым селектором querySelectorAll, поэтому любой браузер, который его реализует, будет очень быстрым.

Если вы используете селектор :first, вы используете что-то, что не является допустимым селектором CSS, поэтому по умолчанию используется движок селектора Sizzle на основе javascript и будет работать намного медленнее.

Если производительность имеет решающее значение, не используйте для этого jQuery. Вы можете просто использовать document.getElementsByTagName() и фильтровать те, которые вам нужны, если браузер не поддерживает querySelectorAll.

var match;
if( !document.querySelectorAll ) {
    var inputs = document.getElementsByTagName('input');

    for( var i = 0, len = inputs.length; i < len; i++) {
        if( /_TextBox107/.test( inputs[i].id ) ) {
            var match = $(inputs[i]);
            break;
        }
    }
} else {
    match = $( document.querySelectorAll( 'input[id$=_TextBox107]' )[0] );
}

Answer 2

Я не проводил никакого исчерпывающего тестирования, но получал результаты, используя ваш «самый медленный» селектор, который был более или менее быстрым, чем ваш «самый быстрый» селектор ... Хотя некоторые другие опции были заметно медленнее.Тем не менее, я тестировал только с использованием IE8 ...

Мой метод выбора до прочтения этого был ...

$("[id$='_TextBox107']")

, который работал несколько медленнее, чем ваш "самый быстрый", но далеко нехудший выбор.Возможно, мне придется еще провести тестирование и пересмотреть свой выбор.