我一直在运行一些测试，看看我是否能找到一个有效的选择器，用于在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选择器来匹配我的版本，但它报告的结果要慢得多。
谁能想到一种优化方法呢？
I've been running some tests to see if I can find an efficient selector for controls prefixed with the id of parent controls in Asp.Net
I've been looking for this as I was to be able to select Asp controls from external javascript files (I'm fed up of using ClientID).
To test I set up a page with 150 textboxes all with the cssclass "speedy" and an individual id and ran the following code to select the 107th textbox.
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 have come up with. $($('input[id$=_TextBox107]')[0]);. The results have been surprising.... I expected using the :first selector to match my version but it reported much slower results.
Can anyone think of a way to optimize this?
最满意答案
这取决于浏览器。
这个版本：
$('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] ); }It will depend 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're using something that is not a valid CSS selector, so it defaults to Sizzle's javascript based selector engine, and will be much slower.
If performance is crucial, then don't use jQuery for this. You can just use document.getElementsByTagName(), and filter the one(s) you want, if the browser doesn't 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] ); }更多推荐
发布评论