在Google Chrome中,Jquery hide()和show()运行速度太慢

Question

我有一个在Chrome中无法正常运行的Web应用程序.在Firefox中完美运行.我有一个包含大量列表项的页面,确切地说是316.每个列表项都包含大量HTML.我的问题是当我想隐藏或显示这些列表项时.

我在jsFiddle上有一个测试页面来显示我遇到的问题.我将HTML页面剥离到一个无序列表以保存所有316个列表项.我有两个按钮,只需在点击时调用jQuery hide或show.同样,这在Firefox,Opera甚至IE中运行得很快,在Safari中非常好,但在谷歌Chrome中,它可能需要30秒以上,这会打开对话框窗口,询问您是否要杀死页面,因为脚本运行时间很长.

这是jsFiddle的链接

http://jsfiddle.net/oumichaelm/UZCZc/3/embedded/result/

感谢任何输入.JMM

Answer 1

看起来这与jQuery无关,只是Chrome隐藏了具有大量子元素的父元素的问题.

这只是使用基本的javascript来隐藏文档准备好的元素:

document.getElementById('sortable-lines').style.display="none";

文档准备好后,它仍然需要永远.

http://jsfiddle.net/petersendidit/UZCZc/10/embedded/result/

为此打开了Chrome错误:http://code.google.com/p/chromium/issues/detail？id = 71305

Answer 2

隐藏时,从DOM中删除元素比使用更快hide().

var sortableLines = $('#sortable-lines');
$('#hide').click(function() {
    $('#timer').text("Hiding");        
    sortableLines.remove();
});

当你append()回到DOM 时,它仍然很慢.

一种可能的解决方法是在单击显示按钮时显示前10个左右的项目,然后setInterval逐步显示它们.

编辑:发现另一个黑客:

您必须将容器设置为overflow: hidden:

#linecontainer { overflow: hidden; }

隐藏时,通过设置margin-top较大的负数将该元素移动到远端.

$('#hide').click(function() {
    $('#timer').text("Hiding");
    sortableLines.css('margin-top', '-1000000px');
});

显示时,重置它margin-top.

$('#show').click(function() {
    $('#timer').text("Showing");
    sortableLines.css('margin-top', '0');
});

而且它显示瞬间隐藏.