Создание очень большого списка опций внутри поля выбора из jSon

Question

Проблема производительности при генерации около 800 опций из объекта jSon через javascript.

Любое предложение, что изменить или использовать, чтобы удалить эти зависания при создании нового списка?

Использование jQuery.

function build_towns(selected,selected_country,selected_regions,selected_rajons)
        {
            tow_box.html(tow_box_empty);
            var towns_priority = '';
            var towns_options = '';
                for(i=0;i < towns.length;i++) 
                    {
                        if(selected_country > 0) {var find_similar = selected_country;var compare_to = towns[i].country_id;}
                        else if(selected_regions > 0) {var find_similar = selected_regions;var compare_to = towns[i].region_id;}
                        else if(selected_rajons > 0) {var find_similar = selected_rajons;var compare_to = towns[i].rajons_id;}
                        else {var find_similar = 1;var compare_to = 1;} // always will be equal, so it's the same as VIEW ALL
                        if(find_similar == compare_to)
                            {
                                    if(towns[i].priority > 0) 
                                {
                                    if(towns[i].town_id == selected) {towns_priority += "<option value='" + towns[i].town_id + "' country='" + towns[i].country_id + "' region='" + towns[i].region_id + "'  rajons='" + towns[i].rajons_id + "' selected>" + towns[i].town + "</option>";}
                                    else {towns_priority += "<option value='" + towns[i].town_id + "' country='" + towns[i].country_id + "' region='" + towns[i].region_id + "'  rajons='" + towns[i].rajons_id + "'>" + towns[i].town + "</option>";}
                                }
                                else
                                {
                                    if(towns[i].town_id == selected) {towns_options += "<option value='" + towns[i].town_id + "' country='" + towns[i].country_id + "' region='" + towns[i].region_id + "'  rajons='" + towns[i].rajons_id + "' selected>" + towns[i].town + "</option>";}
                                    else {towns_options += "<option value='" + towns[i].town_id + "' country='" + towns[i].country_id + "' region='" + towns[i].region_id + "'  rajons='" + towns[i].rajons_id + "'>" + towns[i].town + "</option>";}
                                }
                            }
                    }
            if(towns_priority.length > 0) {return "<option value='0'>----------------</option>" + towns_priority + "<option value='0'>----------------</option>" + towns_options;}
            else {return towns_options;}            
        }

Спасибо.

Answer 1

Одна из ваших проблем заключается в том, что вы продолжаете объединять строки. Это обычно неправильно на всех языках. В JavaScript это будет быстрее:

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

Тем не менее, вы должны профилировать свой код и посмотреть, какая самая медленная часть. 800 DOM-элементов звучат не очень, но некоторые браузеры могут зависнуть. Возможно, вам придется с этим жить.

Кстати, с точки зрения удобства использования, 800 слишком много для комбо. Я бы пошел с автозаполнением. В любом случае, здесь вы используете AJAX, так что автозаполнение - еще более быстрый вариант ...

Answer 2

Если вы можете, не используйте jQuery - raw DOM будет быстрее.

Если вы хотите / действительно хотите использовать jQuery - есть 2 способа вставить. Первый - создать новое для каждого свойства объекта и вставить его в DOM. Второе - создать 1, а затем clone () для каждой последующей опции. Я не уверен, что быстрее, но я знаю, что производительность не идентична.