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);

};

这是我提出的最好的。 $($('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']")

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