Обойти и отфильтровать 1500+ элементов с помощью jQuery в Chrome

Question

Меня укусила ошибка 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");
    }
});

Фрагмент разметки:

<input type="text" />
<ul>  
    <li>
        <div>
            <span title="93252"><label><input type="checkbox">3G</label></span>
        </div>
    </li>
</ul>

Время выполнения Javascript незначительно.Когда Chrome нужно перерисовать элементы после удаления текста в input, он зависает.Не происходит в FF6 / IE7-9.

Я сделал JSFiddle, чтобы проиллюстрировать проблему: http://jsfiddle.net/uUk7S/17/show/

Есть ли другой подход, который я могу использовать, вместо того, чтобы скрывать и показывать элементы, которые будутне заставляет Chrome зависать?Я пытался клонировать ul, обрабатывать в клоне и полностью заменять ul в DOM на клон, но я надеюсь, что есть лучший способ, так как в IE это значительно медленнее.

Answer 1

Вы пробовали другие возможности CSS для сокрытия элементов?

Использование css реквизита, как переключатель visibility? Или переключение между height:auto и height:0;overflow-y:hidden;?

Я сделал небольшой пример здесь , он использует .css({"visibility":"visible","height":"auto"});, чтобы показать, и ({"visibility":"hidden","height":"0"}), чтобы скрыть. И кажется, что он отлично работает в Chrome в нескольких тестах, которые я сделал.

РЕДАКТИРОВАТЬ: Еще лучше здесь , вам просто нужно использовать .css("visibility","visible"); и .css("visibility","hidden");. Использование li[style~="hidden;"]{height:0;} делает изменение высоты для вас.

Answer 2

На самом деле, вы можете поместить пустое значение в элемент <li>. Это на самом деле только исправить, я был в состоянии работать. И когда вам снова понадобится ценность, верните ее обратно. Или вы можете удалить <li>. Но для этого я предпочитаю использовать AJAX.