JavaScript性能，同时将大量子代添加到大量元素中

Question

I have many select inputs on a page (96 or 384). Each has an extensive list of options - almost 1000. As a result the size of the page is between 4-8MB (1-4MB compressed). I decided to make to page load faster by putting list of options just once and then add it to each input with JavaScript.

Unfortunately, the browser either needs a lots of time to finish the task (~3 minutes on FF 10) or hangs (Chrome 17). I tried to accomplish the task with jQuery and pure JS. No difference at all.

Is the task feasible? What should I know to write fast and efficient JavaScript?

Edit: I put all the options to a single string and use innerHTML to put it to the select input. Thanks for such a quick response.

Edit2: I generate elements the way suggested by Diodeus. However, I load options when the select element is in focus (thanks rlemon). I believe all the answers are very helpful and might be valuable for anyone having similar problem. Thank you all.

Answer 1

Build up your HTML as a string or single object an inject it all into that page in one go. DOM re-writes are slow because document re-flows must be calculated for each insert.

Answer 2

Why do you need to append the children separately? Simply wrap the whole list with the options in another element and append that one. This should be much faster since it will be just one operation instead of 1000.

Answer 3

I would suggest you to use ajax. Replace standard input selects with 3rd party combobox Eg: Jquery UI Combobox. First you load all empty comboboxes. It items will be loaded as soon as use click to open drop down list.

You can do it quite easy with jquery and jquery UI.

Answer 4

It's faster to have everything loaded by default on the HTML than using JS to append thousands of elements.

Your server gives you a guarantee of quality/speed the user's computer won't.