How Many Element Id's Can Browsers Safely Handle Before Performance Degredation?

Using element id's is the fastest way for javascript to 'get' an element. Is there a rule of thumb or best practices guideline on how many of these id's should be used before one c

Solution 1:

An ID, in and of itself, is just an attribute value. The only 'performance' issue is extra bits and bytes the browser has to download. From a JavaScript POV, the more elements in the DOM, the longer it can take to traverse it, but that's not directly related to the number of IDs you may be using.

EDIT:

To clarify if your JS is this:

document.getElementById("myID")

it doesn't matter if your HTML looks like this:

<div id="div1">
  <div id="div2">
    ...
      <div id="div999">
        <div id="myDiv">

or this:

<div><div>
    ...
      <div><divid="myDiv">

The JS should run the same for both of those examples.

Solution 2:

We've got a form with over 1,000 fields (don't ask), using jQuery Validate for client-side validation. This includes validating which fields are required, checking the data type of each field, showing/hiding groups of fields based on certain criteria and running calculations across multiple fields as data is entered.

Only MSIE slows down at this scale. Firefox and Chrome run the validation "instantly". MSIE eventually shows the "long running script" dialog. I was notified last night that additional fields are now required.