Question

I’ve been really focused on javascript and improving performance for my website. One thing i do often is, create elements dynamically, and access these elements using ids.

Maybe you can help me with some questions.

1. What are the major draw backs for giving every interesting node in the document a unique id?

2. What is the ideal number of ids in a document?

3. Is there a maximum number of ids for a document?

4. In terms of performance, is getting an element by css class slower than that of getting it by id?

Thank you guys for your answers. If you have any additional notes to these questions about dom and accessing them, it would be appreciated.

Thank you.

Answer 1

I know of no real penalty of using “id” values liberally, other than the one annoyance of IE, Safari, and Chrome promoting “id” values to window properties. Good JavaScript code should be able to deal with that, however.

Note that:

• “id” values must be kept perfectly unique within a document (page). It’s not OK to use the same “id” value for more than one element.
• Lookup by “id” is much faster than lookup by any other means.

In modern browsers, lookups by class can be pretty fast, but that’s only because the work of doing it has been submerged into the low-level support code of the browser (possibly supported by more elaborate internal data structures, caches, etc). Now class names are also very important, both for simple semantic markup and for use by client-side code, so I’m not saying that classes are bad or anything. In fact there are times when doing things exclusively by “id” would be fairly stupid, when using classes would introduce simplicity.

edit — as of now (end of 2013) Firefox creates window properties for elements with “id” attributes too. 🙁