Menu
If I have in the page unnecessary ids on elements, like the HTML Helper does in ASP.Net-MVC.
Does it reduce the performace of my id selectors? (I have a page with enormous amout of elements)
Example:
// First DOM
<HTML>
...
<input type="text" value="first" id="useless" />
<input type="text" value="second" id="useful" />
</HTML>
// Second DOM
<HTML>
...
<input type="text" value="first"/>
<input type="text" value="second" id="useful" />
</HTML>
Script:
<script>
alert($('#useful').val());
// never select the first element (with the useless id)
</script>
661
Short answer, no.
http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
A few months back there were some posts about the performance impact of inefficient CSS selectors. I was intrigued – this is the kind of browser idiosyncratic behavior that I live for. On further investigation, I’m not so sure that it’s worth the time to make CSS selectors more efficient. I’ll go even farther and say I don’t think anyone would notice if we woke up tomorrow and every web page’s CSS selectors were magically optimized...
I revised the test as follows:
- 2000 anchors and 2000 rules (instead of 20,000) – this actually results in ~6000 DOM elements because of all the nesting in P, DIV, DIV, DIV
- the baseline page and tag selector page have 2000 rules just like all the other pages, but these are simple class rules that don’t match any classes in the page
I ran these tests on 12 browsers. Page render time was measured with a script block at the top and bottom of the page. (I loaded the page from local disk to avoid possible impact from chunked encoding.)...
Based on these tests I have the following hypothesis: For most web sites, the possible performance gains from optimizing CSS selectors will be small, and are not worth the costs. There are some types of CSS rules and interactions with JavaScript that can make a page noticeably slower. This is where the focus should be...
152
Selecting an id is extremely as fast, as jQuery backs up to the native
document.getElementById
function. Nevertheless, you can cache your selectors if you use them frequently (save them in a variable).
32
While the JavaScript performance will be unaffected, thousands of ids make your HTML bigger, increasing the load time and traffic cost. It's probably negligible (compressing images and other resources is far more important), but may be a route for optimization nevertheless.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
