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

it shows and hides instantly。

Answer 3

感谢上面的答案，它运作良好，加快了整个过程。

它并不总是有效 - 当我需要的元素位于列表的顶部时，效果很好。但是，如果我从列表中间选择一些东西，它就不会显示所有内容。

我相信我知道它为什么行为不端。

当一长串元素的值设置为隐藏/显示时，隐藏的元素将从流中移除并按照它们被删除的顺序放置在页面底部。
这样可以非常快速地删除元素。

然而，试图让它们再次可见是渲染的痛苦，因为chrome必须记住这些项目所属的顺序，并且似乎要重新计算相关的值。

除了大多数其他浏览器之外，组件的位置不会丢失，因此在这种不必要的排序中不会浪费时间。上面的答案效果非常好，因为这可以避免Chrome的无序问题。

在Google Chrome中，Jquery hide（）和show（）运行速度太慢

3 个答案: