title: Efficiently rendering a large number of "select" elements
body: <p>I'm writing a web application that displays a large number of rows of data (~2000 at present), each of which has a drop-down "select" element with ~100 options.  Any of those options can be selected by default.  I'm generating all the actual DOM elements client-side.  My problem: rendering this beast takes ~4 seconds on my relatively recent machine, which is really suboptimal.  I know the problem is specifically with all the select elements, because replacing them with a bit of static text or a single-option list causes render time to be nigh imperceptible.</p>
  
  <p>The vanilla code, minus failed experiments (see below) is <a href="https://github.com/fiatmoney/vidego/blob/master/resources/vidego.js#L87" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Avoiding the suggestions of "paginate your data" and "don't have so many options in a select", what is the <em>most efficient</em> way I can write my append / render code, assuming I do have a legitimate reason to display that much data and have that many options? For my purposes, Firefox is the only platform I care about.</p>
  
  <p>Things I have tried:</p>
  
  <ul>
  <li>Using an <a href="https://stackoverflow.com/a/10151376/812321">async loop</a> to append rows to the table (slower than a regular loop, and oddly didn't render the intermediate results)</li>
  <li>Building up a string that represents the body of the table and inserting it into the DOM in a single call (almost identical performance)</li>
  <li>Instead of inserting the entire options list, inserting a single-option "select" element, and then populating the entire list when the "select" element gains focus (presumably because someone is trying to change it).  This was actually pretty high-performing for the initial render, but then populating the element with the full list caused some weird behavior, losing focus and never actually being able to "open" the select element.</li>
  </ul>
  
  <p>Right now my default assumption is that the third option is the way to go, and I need to figure out how to do some bookkeeping about what has already been populated.  But my suspicion is that there is a plainly better / faster / more idiomatic way to do this.  Is there?</p>