javascript - 解决在 Chrome 中使用 jQuery 实时过滤 1500 多个项目的问题

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，在克隆中处理并用克隆完全替换 DOM 中的 ul，但我希望有更好的方法，因为这在浏览器。

Answer 1

您是否尝试过其他隐藏元素的 css 可能性？

像 visibility 一样使用 css 属性？或者在 height:auto 和 height:0;overflow-y:hidden; 之间切换？

我做了一个小例子here ，它使用 .css({"visibility":"visible","height":"auto"}); 来显示和 ({"visibility":"hidden","height ":"0"}) 隐藏。在我做的几次测试中，它似乎在 chrome 中运行良好。

编辑:更好here ，您只需使用 .css("visibility","visible"); 和 .css("visibility","hidden");。 li[style~="hidden;"]{height:0;} 的使用是为你做高度修改。