Can anyone win this jQuery selector?

Question

I conducted several tests to find out if I can find an effective selector for controls with a prefix of the identifier of the parent controls in Asp.Net

I was looking for this because I had to select Asp controls from external javascript files (I'm tired of using ClientID).

To check, I set up a page with 150 text fields, all with a “fast” cssclass and a separate identifier, and executed the following code to select the 107th text field.

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

This is the best I've come up with. $($('input[id$=_TextBox107]')[0]); . The results were unexpected .... I expected with the :first selector to match my version, but it reported much slower results.

Can anyone think of how to optimize this?

Answer 1

It depends on the browser.

This version:

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

... is a valid querySelectorAll selector, so any browser that implements it will be very fast.

If you use the :first selector, you use something that is not a valid CSS selector, so it defaults to using the javascript-based Sizzle selector and will be much slower.

If performance is critical, then do not use jQuery for this. You can simply use document.getElementsByTagName() and filter one of them if the browser does not support 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

I did not do any exhaustive tests, but I got the results using your “slow” selector, which was more or less as fast as your “fastest” selector ... However, some of the other options were noticeably slower. However, I tested only IE8 ...

My method of choice, before reading it was ...

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

which ran somewhat slower than your "fastest" but was far from the worst choice. I may have to do a few more tests and rethink my choice.