A project I'm currently working currently has about 10 ULs, each which will have anywhere from 10-50 elements in them. Its been proposed that each of those elements have a unique ID specified to it that we will use to update content with via Javascript.
This seems like a large number of IDs to add to a page, but each field will have a real and meaningful name.
If this is useful to us, are will adding IDs to this many already existing elements have any effects on performance while initially rendering the page or traversing/modifying it with javascript?
In my personal experience I've implemented pages with over 1000 unique IDs and even IE seem to cope quite well. However, please remember that IE will create a global variable for each ID on the page and remember that in javascript, commonly both global variables and function names are merely attributes of the window object.
So in IE the following code will break:
<div id="foo"></div>
<script>
function foo (txt) {
document.getElementById('foo').innerHTML = txt; // fail in IE
// because function 'foo'
// clash with ID 'foo'
}
</script>
Just something to keep in mind because with such a large number of ID's chances of function names clashing increases.
I took Eddie Parker's advice. Further, I was interested in the difference between short ID's (<10 characters) vs long ID's (>50 characters).
My test used FF2.0 to open a page with n DIV tags, each with an ID, containing only the text "Content":
Hope that gives you a ballpark.
Edit: I was using the YSlow extension to perform the timing.
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