Меня укусила ошибка Chrome/Webkit 71305, при которой удаление большого количества узлов приводит к зависанию Chrome. (Также встречается в Safari).
Я фильтрую пункт списка, который будет в выпадающем меню со следующим:
jQuery.expr[':'].Contains = function(a, i, m) {
return $.trim((a.textContent || a.innerText || "")).toUpperCase().indexOf(m[3].toUpperCase()) == 0;
};
var input = $('input');
var container = $('ul');
input.keyup(function(e) {
var filter = $.trim(input.val());
if (filter.length > 0) {
// Show matches.
container.find("li:Contains(" + filter + ")").css("display", "block");
container.find("li:not(:Contains(" + filter + "))").css("display", "none");
}
else {
container.find('li').css("display", "block");
}
});
Фрагмент разметки:
-
Время, необходимое для выполнения Javascript, ничтожно мало. Именно тогда, когда Chrome нужно перерисовать элементы после удаления текста в input
, он зависает. Этого не происходит в FF6/IE7-9.
Я сделал JSFiddle для иллюстрации этой проблемы: http://jsfiddle.net/uUk7S/17/show/
Есть ли другой подход, который я могу использовать вместо того, чтобы скрывать и показывать элементы, которые не приводят к зависанию хрома? Я пытался клонировать ul
, обрабатывая в клоне и полностью заменяя ul
в DOM на клон, но надеюсь, что есть лучший способ, так как в IE это происходит значительно медленнее.