Generating very big options list inside select box from jSon

Question

Performance issue, when generating around 800~ options from jSon object via javascript.

Any suggestion, what to change or use, to remove those freezes, when new list is generated?

Using jQuery.

http://www.copypastecode.com/24016/

Thanks.

Answer 1

If you can, don't use jQuery - raw DOM will be faster.

If you have to/really want to use jQuery - there are 2 ways to insert. The first is to create a new for each object property, and insert it into the DOM. The second is to create 1 then clone() it for each subsequent option. I'm not sure which is faster, but I know the performance is not identical.

Answer 2

One problem you have there is that you keep concatenating strings. This is generally wrong in all languages. In JavaScript, this will be faster:

var a = [];
for(var i=0;i<1000;i++){
   a.push(i);
   a.push(" hello");
}
var s = a.join('');

That said, you should profile your code and see what is the slowest part. 800 DOM elements don't sound like much, but it could make some browsers hang. It is possible you'll have to live with it.

By the way, usability-wise, 800 is too much for a combo. I'd go with auto-complete. You're using AJAX anyway here, so auto-complete is even the faster option...