解决在Chrome中使用jQuery实时过滤1500多个项目的问题 [英] Work around for live filtering 1500+ items with jQuery in Chrome

问题描述

我被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）{
 //显示匹配
 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删除输入中挂起的文本之后需要重新绘制元素的时候。不会发生在FF6 / IE7-9中。

我用JSFiddle来说明这个问题： http://jsfiddle.net/uUk7S/17/show/

是否有另一种方法可以使用而不是隐藏和显示不会导致Chrome挂起的元素？我试过克隆 ul ，在克隆中处理，并用克隆完全替换DOM中的 ul ，但是我希望有一个更好的方法，因为这是在IE浏览器显着较慢。

解决方案

你有没有尝试其他css隐藏元素的可能性？

使用像知名度开关的css道具？
或 height：auto 和 height：0; overflow-y：hidden; ？

我在这里做了一个小例子，它使用< $ {c $ c> .css（{visibility：visible，height：auto}）; 显示和（{visibility：隐藏，高度：0}）隐藏。而且它似乎在我做的少量测试中可以正常使用。

编辑：甚至更好 here ，您只需使用 .css（visibility，visible）; 和 .css（visibility，hidden）; 。使用 li [style〜=hidden;] {height：0;} 正在为您修改高度。

I'm being bitten by the Chrome/Webkit 71305 bug where un-hiding a large number of nodes causes Chrome to hang. (Also occurs in Safari).

I am filtering a list item that will be in a drop down menu with the following:

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

Snippet of the markup:

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

The time it takes for the Javascript to execute is negligible. It's when Chrome needs to redraw the elements after deleting the text in the input that it hangs. Does not happen in FF6/IE7-9.

I made a JSFiddle to illustrate the issue: http://jsfiddle.net/uUk7S/17/show/

Is there another approach I can take rather than hiding and showing the elements that will not cause Chrome to hang? I have tried cloning the ul, processing in the clone and replacing the ul in the DOM completely with the clone, but am hoping there's a better way as this is significantly slower in IE.

解决方案

Have you tried other css possibility for hiding the elements?

Using css props like a switch of visibility? Or a switch between height:auto and height:0;overflow-y:hidden;?

I made a little example here, it's using .css({"visibility":"visible","height":"auto"}); to show and ({"visibility":"hidden","height":"0"}) to hide. And it seems to work fine in chrome in the few test I did.

EDIT: Even better here , you just have to use .css("visibility","visible"); and .css("visibility","hidden");. The use of li[style~="hidden;"]{height:0;} is doing the height modification for you.

这篇关于解决在Chrome中使用jQuery实时过滤1500多个项目的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！