Ideal number of ids in dom or html document

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. :(

Answer 2

1. There are no drawbacks to giving every element an id, other than the possibility of value collisions (and what Pointy has shared)
2. It doesn't matter how many you use
3. There is no limit to how many elements with ids can be on a page (same as above)
4. Since ID's are unique, it will be faster - but you will lose the advantage over classes of being able to use multiple values, or applying the same value to multiple elements. For instance, if you want to use javascript to select multiple elements by class name instead of listing several ids. For CSS in particular, the speed increase will generally be unnoticeable.

Elements with IDs have some other non-javascript related advantages as well, such as hyperlinking to the element directly. In general, I prefer to avoid littering the markup with ids unless I feel it is truly necessary, for example: with dynamic content from a database that needs to interact with javascript.

To address your performance concerns, it's rare that an inefficient selector is going to give you significant problems. While it's good to optimize, I wouldn't go out of your way to give every element that you might select an id for this reason. Most performance issues are due to other things, like slow database queries while doing AJAX requests, or running lots of animations at once, or just inefficient javascript in general.