IE 8 предлагает пользователю «медленный» скрипт jQuery

Question

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

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

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

Answer 1

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

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

Answer 2

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

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

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

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

    listItems.sort(function(a, b) {
        return a.id - b.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 элементами.

Answer 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);
});

Answer 4

Вы также можете разбить его на более мелкие куски и периодически давать браузеру «контроль»:

Как вернуть (кратко) управление браузеру во время интенсивной обработки JavaScript?