有人能打败这个 jQuery 选择器吗？

Question

我一直在运行一些测试，看看是否可以找到一个有效的控件选择器，该控件的前缀为 Asp.Net 中父控件的 id

我一直在寻找这个，因为我能够从外部 javascript 文件中选择 Asp 控件（我厌倦了使用 ClientID）。

为了进行测试，我设置了一个包含 150 个文本框的页面，所有文本框均具有 cssclass“speedy”和单独的 id，并运行以下代码来选择第 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);

};

这是我想出的最好的办法。 $($('输入[id$=_TextBox107]')[0]);。结果令人惊讶......我期望使用 :first 选择器来匹配我的版本，但它报告的结果要慢得多。

有人能想出一种方法来优化这个吗？

Answer 1

这将取决于浏览器。

此版本：

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

...是一个有效的 querySelectorAll 选择器，因此任何实现它的浏览器都会非常快。

如果您使用 :first 选择器，则您使用的不是有效的 CSS 选择器，因此它默认使用 Sizzle 基于 javascript 的选择器引擎，并且速度会慢得多。

如果性能至关重要，那么就不要使用 jQuery。如果浏览器不支持 querySelectorAll，您只需使用 document.getElementsByTagName() 即可过滤所需的元素。

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']")

它的执行速度比你的“最快”要慢一些，但到目前为止还不是最糟糕的选择。我可能需要做更多测试并重新考虑我的选择。