Chrome очень медленно очищает мой список через jquery

Question

Я разрешаю пользователю искать в списке, который сужает результаты, содержащиеся в этом списке.

Запрос Ajax быстро возвращает результаты, и Chrome может быстро добавить результаты. Проблема заключается в среднем шаге, где я фактически очищаю список.

Вот код:

function PopulateListBox(data, listBox) {

    var options = '';
    if (data != null) {
        for (var i = 0; i < data.length; i++) {
            options += "<option value=\"" + data[i].Id + "\">" + data[i].Name + '</option>';
        }
    }
    listBox.empty().append(options);
}

где data - это массив JSON, а listbox - это селектор jquery с идентификатором для списка (селектор по идентификатору, например, $('#listbox'). В списке есть около 5-10 тыс. Опций.

Firefox и даже IE справляются с этим хорошо, но Chrome упрям ​​(что случилось с "самым быстрым js engine" google ??).

Я использую последнюю версию jquery (1.5.1) и Chrome 11.0.696.3 dev. (Я также использую FF 3.6 и IE 8)

Answer 1

Возможно, будет быстрее использовать метод html () вместо empty() с последующим append():

listBox.html(options);

Answer 2

Из любопытства вы пробовали replaceWith? ( документы здесь.) Вам понадобится div, обертывающий ваш listBox, и это будет тот, который вы передадите в функцию PopulateListBox. Вам также нужно было бы вручную обернуть переменную options информацией о тегах открытия и закрытия списка (показана ниже как псевдо html):

...
options = "<listbox tag>" + options + "</listbox tag>";
listBoxWrapperDiv.replaceWith(options);
...