IE 8 предлагает пользователю "медленный" jQuery script

У меня есть форма с более чем 100 элементами списка, которые я должен изменить для отправки. Следующий код работает для изменения порядка списка без каких-либо очевидных проблем в Firefox; однако запрос IE с сообщением "A script на этой странице заставляет Internet Explorer запускаться медленно. Если он продолжает работать, ваш компьютер может перестать отвечать на запросы. Вы хотите прервать script?" Если пользователь нажимает "Нет", script будет работать как ожидалось.

var listitems = $(form).find('li').get();
listitems.sort(function(a, b) {
    var compA = $(a).attr('id');
    var compB = $(b).attr('id');
    return (compA - compB);
});

Любые идеи о том, как сделать это более эффективным?

ОТВЕТЫ

Ответ 1

Я не пробовал его с 100 элементами, но он полностью работал с 2.

listitems.sort(function(a, b) {
    return (a.id - b.id);
});

Ответ 2

Использовал несколько разных подходов и получил интересные результаты для разных браузеров. К сожалению, один браузер, который беспокоит, как обычно, тот, к которому у меня нет доступа. Я был бы признателен, если бы кто-нибудь мог заметить, как эти тесты работают в IE.

Не удалось получить многого, исключив использование jQuery вообще в Chrome, но пропуская jQuery было намного лучше в других браузерах. Кроме того, по мере увеличения числа элементов <li> он помогает построить массив с только идентификатором и сортировать его. После сортировки сортированный массив идентификаторов может использоваться для получения данных узлов в правильном порядке с использованием этого массива.

Сортировка массива элементов списка.

function sortListItems() {
    var listItems = $("li").get();

    listItems.sort(function(a, b) {
        return a.id - b.id;
    });
}

Сортировка массива id.

function sortIDs() {
    var listItems = $("li");
    var ids = [];
    for(var i = 0; i < listItems.length; i++) {
        ids.push(listItems[i].id);
    }

    ids.sort(function(a, b) {
        return a - b;
    });
}

Смотрите результаты http://jsfiddle.net/hwxmJ/4/. Safari по какой-то причине исчезла на 1000 предметов, в то время как другие - Chrome, Opera, Firefox отлично работали с 2000 элементами.

Ответ 3

Ваш код подсказывает, что ваши идентификаторы являются числовыми, что недействительно в HTML. Вы должны изменить свой дизайн. Кроме того, вы можете сделать это очень просто и с лучшей производительностью без jQuery.

Далее предполагается, что ваши идентификаторы имеют форму "li_x", где x - целое число. Он не полностью оптимизирован, так как он вызывает функцию для извлечения числового идентификатора в каждом сравнении. Вы можете вместо этого кэшировать числовые идентификаторы заранее, если вам нужно повысить производительность, но я не думаю, что это будет достаточно плохо, чтобы гарантировать это.

function getNumericId(li) {
    return li.id.split("_")[1];
}

var liList = form.getElementsByTagName("li");
var liArray = Array.prototype.slice.call(liList, 0);
liArray.sort(function(a, b) {
    return getNumericId(a) - getNumericId(b);
});