解决实时过滤 1500+ Chrome 中使用 jQuery 的项目
我遇到了 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/< /a>
除了隐藏和显示不会导致 Chrome 挂起的元素之外，我还可以采取另一种方法吗？我尝试过克隆 ul，在克隆中进行处理并用克隆完全替换 DOM 中的 ul，但我希望有更好的方法，因为这在IE。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您是否尝试过其他 css 隐藏元素的可能性？
使用 css props 作为
可见性的开关？或者在
height:auto和height:0;overflow-y:hidden;之间切换？我在这里做了一个小例子，它使用
.css({"visibility":"visible", "height":"auto"});显示，({"visibility":"hidden","height":"0"})隐藏。在我所做的几次测试中，它似乎在 Chrome 中工作得很好。编辑：更好的是这里，您只需使用
。 css("可见性","可见");和.css("可见性","隐藏");。使用li[style~="hidden;"]{height:0;}正在为您进行高度修改。Have you tried other css possibility for hiding the elements?
Using css props like a switch of
visibility?Or a switch between
height:autoandheight: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 ofli[style~="hidden;"]{height:0;}is doing the height modification for you.实际上，您可以将空值放入
元素中。这实际上是我能够工作的唯一修复。当你再次需要价值时，就把它放回去。或者您可以删除Actualy, you can put empty value to
<li>element. That actualy is only fix i was able to work. And when you need value again, put it back. Or you can remove<li>. But I more prefere for that, to use AJAX.