Effect of adding excessiv ID's on html / js rendering performance

Question

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?

Answer 1

I can't answer authoritatively, but why don't you just write a script to generate yourself a ridiculously large ul list, and test rendering performance with/without id's? Then you can test it across a multitude of browsers while you're at it. Then post the answer up here and you can answer your own question and earn a shiny badge. ;)

It shouldn't take very long to implement a python script to output that.

Answer 2

Adding all the id attributes of course means that the page source gets longer, which might affect the load time somewhat. Other than that, the effect would be minimal. Just having the elements in the page clearly causes a lot more work than adding an id to them.

Answer 3

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.

Answer 4

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":

• 5000 Short ID's: 1.022s to load from localhost and render
• 5000 Long ID's: 1.065s to load from localhost and render
• 50,000 Short ID's: 6.702s to load from localhost and render
• 50,000 Long ID's: 6.792s to load from localhost and render

Hope that gives you a ballpark.

Edit: I was using the YSlow extension to perform the timing.